Jump to content

Archived

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

seanocaside21

Clickable Images + CSS

Recommended Posts

seanocaside21

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. 

 

Thanks,

Seán.

Share this post


Link to post
Share on other sites

×