CSS3 Transition Hover

bockey HTML & CSS Tips 10 April 2025 Hits: 212

This CSS3 snippet adds a smooth transition effect when you hover over an element, such as a button or image. It enhances the user experience by animating changes like background color, scale, or opacity — creating a more modern and interactive feel without using JavaScript.

CSS code:

#cf { position:relative; height:65px; width:65px; margin:0 3px 0 auto; float:left; display:inline } #cf img { position:absolute; left:0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #cf img.top {margin-right:1px;} #cf img.top:hover { opacity:0; }

HTML code:


<div id="cf"><img class="bottom" src="f1.png" /> <img class="top" src="f.png" /></div>
<div id="cf"><img class="bottom" src="in.png" /> <img class="top" src="in1.png" /></div>
<div id="cf"><img class="bottom" src="g1.png" /> <img class="top" src="g.png" /></div>
<div id="cf"><img class="bottom" src="t1.png" /> <img class="top" src="t.png" /></div>

The Result:

Boki

With more than 15 years of hands-on experience in Joomla, the author specializes in building and redesigning websites that are both functional and easy to use. Driven by a passion for clean code and thoughtful design, they help individuals and businesses bring their digital ideas to life—turning concepts into smooth, engaging online experiences.

Tips & Tricks