Two column list with images and border - rotate border but not image

I have rebuilt the old flash website of a friend. Now I still problems. Here is the example:

On the left side logos are displayed. On mouseover the border should be rotated. But in my case the logo rotates to. In addition the logo is not centered vertically.

So how I can center the images and also ensure that they are not rotated. Is there something possible with CSS or can I recreate the same list again without border which overlaps the other?

Thanks in advance

PS Maybe you can show me improvements for this example. Because I´m not a Expert in HTML/CSS...

Answers


Here are some points:

To center an element within another element you can do something like this:

.centered {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px; 
    margin: auto;
}

Notice, that the position of an absolute positioned element is related to its offsetParent. Hence you need to to position at least one element in a parent chain (usually as relative).

transform: rotate() rotates all elements within the element to which it's used. To tackle this, you need to rotate the elements you don't want to rotate, to opposite direction.

A heavily simplified demo at jsFiddle.


Need Your Help

Triggering audio on hover and triggering different audio on click of same div?

jquery audio click hover mouseenter

I have a div with an image in it. On hover of this image I want one audio to play, then on click of the same image I want another audio to play. This is my code so far, it doesn't seem to work? Any

How can i force IE to launch a certain application to open content from a link?

internet-explorer mime-types hyperlink

i'd like to know if there is someway to force IE to open the content of a link with

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.