Jump to content


This topic is now archived and is closed to further replies.


Clickable Images + CSS

Recommended Posts


Hi All


I am starting to use the column + media box combo to create clickable images instead of using the ibox. 


I just have a few questions when creating some nice CSS effects on hover. 



Here is the html:


<a class="thumb" href="#"><img src="http://expertsecurit...th_Services.jpg" alt="Locksmith Services"></a>



And CSS:


.section-mediabox img:hover {
  opacity: 0.7;
  -webkit-transition: all 0.6s ease-in;
   -moz-transition: all 0.6s ease-in;
   -o-transition: all 0.6s ease-in;
   -ms-transition: all 0.6s ease-in;
   transition: all 0.6s ease-in;



That all works fine but the problem is the hover effect is applied to all linked images. Is there a way of applying one hover effect to the logo and another to the thumbnail images?


I have created the class .thumb (as you can see from the Html) for the thumbnails so maybe i can do something with that?

It is probably staring me in the face but thought i would ask. 




Share this post

Link to post
Share on other sites