6 Cool image CSS effects and hover tricks
This is a basic tutorial on image CSS effects and hover tricks for beginners. Feel free to add, suggest and give your opinions.
Brief CSS introduction
CSS (Cascading Style Sheets), as you may already know, describes how (visual styling) elements in markup languages like HTML are presented to you and adapted to suit various devices like phones, tablets, and desktops. Such elements include images, forms, links, colors, fonts, and other layout elements.
CSS, HTML, and JavaScript are the cornerstone technologies of the modern World Wide Web.
CSS can be used to manipulate many elements, but we will focus on its usage in image manipulation. This will include hover manipulation which we will perform using external CSS / custom CSS file.
Note: :hover is a pseudo-selector used to select layout elements such as links when the mouse hovers over them. :hover selector cannot be performed using inline styling, as such, we have to use external CSS.
Tip: Other selectors include :visited used to style visited links, :link for unvisited links, and :active selector for active links.
Tip: When defining these link-related pseudo-selectors, for effectiveness, hover should ALWAYS come after :visited and :link selectors.
Let’s dive right in…
Image CSS effects and hover tricks/image transformation effects using CSS tutorial
Note: For the sake of this tutorial, we will be using a lot of inline CSS, it is, however, advisable to use external CSS.
We will use this test image
And its parts are
<img class="lead-image aligncenter" src="https://bit.ly/2NLylVb" alt="image CSS effects and hover tricks" />
class="lead-image aligncenter"
the “lead-image” CSS class we will use to manipulate the image and “aligncenter” which aligns the image in the center, the raw code is below
.aligncenter { display: block; margin: 0 auto; }
and finally, the alternative text for search engines
alt="image CSS effects and hover tricks"
Grayscale CSS filter image effect
Use this filter to change the image to black and white color… this can be done using inline CSS:
<img class="lead-image aligncenter" style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" src="https://bit.ly/2NLylVb" alt="image CSS effects and hover tricks" />
Tip: For browser compatibility, we use two versions of this code.
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%); /* For Mozilla Firefox etc */
For external CSS:
.lead-image { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
Rounded images effect
To get a rounded image, we use “border-radius” CSS property, and by setting the radius to 50%, we get a round image. You can use percentage or pixels e.g. 100px to achieve this.
<img class="lead-image aligncenter" style="border-radius: 50%;" src="https://bit.ly/2NLylVb" alt="image CSS effects and hover tricks" />
For external CSS
.lead-image { border-radius: 50%; }
Image rotation at given angles
To rotate an image at given angles, we use “transform: rotate( -/+ deg);” syntax.
So, to rotate the image at an angle of negative 20 degrees, we use “transform: rotate(-20deg);”
<img class="lead-image aligncenter" style="transform: rotate(-20deg);" src="https://bit.ly/2NLylVb" alt="image CSS effects and hover tricks" />
For external CSS
.lead-image { transform: rotate(-20deg); }
Note: You can use positive(+) and negative(-) angles hence “transform: rotate( -/+ deg);” e.g “transform: rotate(+10deg);” to rotate the image around the 360 degrees plane.
Flip an Image along X or Y axes image effect
You can either flip an image along the Y or X axes using, “transform: scaleX(-1)” for X axis or “transform: scaleY(-1)” along the Y axis.
Let us flip the image along the X-axis on this illustration.
<img class="lead-image aligncenter" style="-webkit-transform: scaleX(-1); transform: scaleX(-1);" src="https://bit.ly/2NLylVb" alt="image CSS effects and hover tricks" />
For external CSS – X axis
.lead-image { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
Y-axis
.lead-image { -webkit-transform: scaleY(-1); transform: scaleY(-1); }
Image transformation on hover using CSS
As discussed above, : hover pseudo-selector can be used to on links, images, and texts etc when the mouse hovers over the elements.
We can get more creative and add the effects above only on mouse hover over the image.
We will now set a new on-hover image CSS class “lead-hover-image“, and our syntax will be:
.lead-hover-image:hover { properties; }
As mentioned earlier, we cannot use inline :hover pseudo-selector so we will use external CSS from here.
Grayscale Filter and 360 degrees image Flip along X-axis on hover
Hover over the image below to see the effect.
Raw image code
<img class="lead-hover-image aligncenter" src="https://bit.ly/2NLylVb" alt="image CSS effects and hover tricks" />
external CSS
.lead-hover-image:hover { -webkit-filter: grayscale(100%); /* Grayscale in Safari 6.0 - 9.0 */ filter: grayscale(100%); /* Grayscale in Mozilla Firefox etc */ -webkit-transform: scaleX(-1); /* Image flip in Safari 6.0 - 9.0 */ transform: scaleX(-1); /* Image flip in Mozilla Firefox etc */ }
Zoom in, Gray Scale Filter, Flip, and rounded focus bonus image hover CSS effect
We can build on the above hover effects by adding additional effects. To add the additional effects without affecting the above image, we will introduce an additional CSS class “additional-effects”
So, we now have a raw image code:
<img class="additional-effects aligncenter" src="https://bit.ly/2NLylVb" alt="image CSS effects and hover tricks" />
Hover over the image below to see the new effects.
For external CSS
.additional-effects:hover { -webkit-filter: grayscale(100%); /* Grayscale in Safari 6.0 - 9.0 */ filter: grayscale(100%); /* Grayscale in Mozilla Firefox etc */ -webkit-transform: scaleX(-1); /* Image flip in Safari 6.0 - 9.0 */ transform: scaleX(-1); /* Image flip in Mozilla Firefox etc */ border: 30px solid #ac9270; border-radius: 50%; transform: rotate(-20deg); width: 712px; height: 548px; }
Creating the zoom image hover CSS effect
To create the zoom effect, we “increase: the size of the original image on hover, thus giving a zooming illusion.
Our original image was 512 by 348 pixels, but as you can see above, we increased it to 712 by 548 pixels on hover.
border: 30px solid #ac9270;
This adds the brown border around the image thus creating the “focus” illusion. You can increase the size of the border to bring the image into “sharper focus.”
There are so many cool image CSS effects and hover tricks, but these are just a few to warm you up for your creative journey; the possibilities are limitless.
Could you also be interested in learning how to optimize your images for various devices? Check Media queries breakpoints CSS tricks (media queries for standard devices)
For more information on image CSS effects and hover tricks, you can comment below or simply contact us, we will be happy to assist.