- <!--The images are placed in a unordered list which is given the class "move"-->
- <ul class="move">
- <li><img src="assets/image-hover01.jpg" width="200" height="160" alt="Llyn Idwal"></li>
- <li><img src="assets/image-hover02.jpg" width="200" height="160" alt="Path to Llyn Idwal"></li>
- <li><img src="assets/image-hover03.jpg" width="200" height="160" alt="Nant Ffrancon"></li>
- </ul>
Grains of Sand CSS3 Demos - Image Hover Effects
Images Move When Hovered Over
Using CSS3 transform:scale you can make images move when they are hovered over or in focus. This works in all the latest browsers. This doesn't work in IE8 or earlier, which don't support the transform property (although you can use the MS Matrix Filter).
What We're Aiming For hover over the images to see the effect
Step One
Insert the images and place them in a line
HTML
CSS
- /***Style the list items to place the images in a line with some spacing between them***/
- ul.move{
- list-style-type:none; /*removes the bullet points from the list items*/
- text-align:center;
- }
- ul.move li{
- display:inline-block; /*places the images in a line*/
- margin:5px;
- }
Result
Step Two
Style the images by adding a frame and shadow and rotating them 1 degrees
HTML
- same as step one
CSS
- .move li img{
- margin:5px;
- /**give the images a frame**/
- background: #fff; /*colour of the frame*/
- padding: 10px; /*width of the frame*/
- /**give the images a drop shadow outside the frame**/
- -webkit-box-shadow: 2px 3px 8px #444;
- -moz-box-shadow: 2px 3px 8px #444;
- box-shadow: 2px 3px 8px #444;
- /**rotate the images by 1 degrees clockwise**/
- -webkit-transform:rotate(1deg);
- -moz-transform:rotate(1deg);
- -o-transform:rotate(1deg);
- -ms-transform:rotate(1deg);
- transform:rotate(1deg);
- }
- /**Rotate alternate images anti-clockwise**/
- .move li:nth-child(even) img {
- -webkit-transform: rotate(-1deg);
- -moz-transform: rotate(-1deg);
- -o-transform: rotate(-1deg);
- -ms-transform: rotate(-1deg);
- transform: rotate(-1deg);
- }
Result
Step Three
Add the images hover effects
HTML
- same as step one
CSS
- /***TO MAKE THE IMAGES MOVE, WE CHANGE THE ROTATE DIRECTION AND INCREASE THE SIZE SLIGHTLY***/
- /**Rotate odd numbered images by 1 degrees anti-clockwise and increase the size by 50%**/
- .move li img:hover, .move li img:focus{
- z-index:1000; /*places the hovered image on top of the others*/
- -webkit-transform: rotate(-1deg) scale(1.50);
- -moz-transform: rotate(-1deg) scale(1.50);
- -o-transform: rotate(-1deg) scale(1.50);
- -ms-transform: rotate(-1deg) scale(1.50);
- transform: rotate(-1deg) scale(1.50);
- cursor:pointer; /*turns the cursor into a hand*/
- }
- /**Rotate even numbered images by 1 degrees clockwise and increase the size by 50%**/
- .move li:nth-child(even) img:hover, .move li:nth-child(even) img:focus{
- z-index:1000; /*places the hovered image on top of the others*/
-webkit-transform: rotate(1deg) scale(1.50); - -moz-transform: rotate(1deg) scale(1.50);
- -o-transform: rotate(1deg) scale(1.50);
- -ms-transform: rotate(1deg) scale(1.50);
- transform: rotate(1deg) scale(1.50);
- }
Result
Hover of the images to see the effects
Full Code For You To Copy And Paste
HTML
- /***Place the images in an unordered list***/
- <ul class="move">
- <li><img src="assets/image-hover01.jpg" width="200" height="160" alt="Llyn Idwal"></li>
- <li><img src="assets/image-hover02.jpg" width="200" height="160" alt="Path to Llyn Idwal"></li>
- <li><img src="assets/image-hover03.jpg" width="200" height="160" alt="Nant Ffrancon"></li>
- </ul>
CSS
- /***FIRST STYLE THE LIST ITEMS BY REMOVING THE BULLET POINT & PLACING THEM IN A LINE***/
- ul.move{
- list-style-type:none;
- text-align:center;
- }
- ul.move li{
- display:inline-block;
- margin:5px;
- }
- /***NOW STYLE THE IMAGES BY ADDING A FRAME, SHADOW AND ROTATING THEM 1°***/
- .move li img{
- margin:5px;
- /*add the frame*/
- padding:10px; /*frame size*/
- background:#fff; /*frame colour*/
- /*add a drop shadow*/
- -webkit-box-shadow: 2px 3px 8px #444;
- -moz-box-shadow: 2px 3px 8px #444;
- box-shadow: 2px 3px 8px #444;
- /*rotate the images*/
- -webkit-transform:rotate(1deg);
- -moz-transform:rotate(1deg);
- -o-transform:rotate(1deg);
- -ms-transform:rotate(1deg);
- transform:rotate(1deg);
} - /*rotate alternate (in this case even) images the opposite way*/
- .move li:nth-child(even) img {
- -webkit-transform: rotate(-1deg);
- -moz-transform: rotate(-1deg);
- -o-transform: rotate(-1deg);
- -ms-transform: rotate(-1deg);
- transform: rotate(-1deg);
- }
- /***FINALLY ROTATE THE IMAGES THE OTHER WAY AND INCREASE THE SIZE WHEN HOVERED***/
- .move li img:hover{
- z-index:1000;
- -webkit-transform: rotate(-1deg) scale(1.50);
- -moz-transform: rotate(-1deg) scale(1.50);
- -o-transform: rotate(-1deg) scale(1.50);
- -ms-transform: rotate(-1deg) scale(1.50);
- transform: rotate(-1deg) scale(1.50);
- cursor:pointer;
} - .move li:nth-child(even) img:hover, .move li:nth-child(even) img:focus{
- z-index:1000;
- -webkit-transform: rotate(1deg) scale(1.50);
- -moz-transform: rotate(1deg) scale(1.50);
- -o-transform: rotate(1deg) scale(1.50);
- -ms-transform: rotate(1deg) scale(1.50);
- transform: rotate(1deg) scale(1.50);
- }
Explanations Of The CSS3 Used In The Demo
Browser Support
The demo works in all the latest browsers, including IE9. IE8 and lower will style the images with the frame, but do not support transform:rotate or transform:scale, although Microsoft's Matrix Filter can be used to achieve the effects.
