hover opacity « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Sentence

hover opacity

7 posts from 3 voices

Started 6 months ago by kevin77
Latest reply from Devin
This topic is resolved

Tags:

opacity

kevin77
Member

love this theme so far! Could you tell me if we could add a transparent opacity colour when the mouse overs the image link in portfolio? I have managed to remove the IMG title, but would like to add some form of interaction when the mouse overs the image link. I've looked up css and they said to add :

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

But that didn't work.

Posted 6 months ago #
kevin77
Member

what I am after is like what happens in the Gallery images (but this opens up a lighbox overlay). I would like the same thing but in portfolio grid layouts but when clicked will actually go to the link - not open the lightbox overlay.

Posted 6 months ago #
Nick
Moderator
Hi,

The code you pasted above will indeed do this, but it will do it for every single image in the website, which I don't think will be such a good idea.

"mouse overs the image" is called the 'hover' effect, and if you notice your second block of code has the :hover, so first block of code is when the image is normally seen, and the second block takes over when a mouse hovers over the image. \\

Please try this instead
a) add this to your Quick CSS in the backend or to custom.css
```
.image1
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.image1:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
```
and add this to the content of your post or page. Just change the 'src=' to a url which leads to an image, and change 'href=' to a url link to a page. Just make sure that 'class=image1' is not touched since its defined in the css above as such.
```
<a href="your link url"><img src="resources/your image.jpg" alt="" /></a>
```
img is a tag reserved for all images, thus it didn't work for you as you wanted.

Thanks,

Nick
Posted 6 months ago #
kevin77
Member

ok... this works for images that are newly posted in blog etc. but not in the main portfolio images in the portfolio page (I cannot change src, href etc.). Is there a special tag which used in the portfolio thumbnails that I can change it too?

Posted 6 months ago #
Devin
Moderator
Hi kevin77,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top .portfolio-sort-container .slideshow li img:hover {
    opacity: 1.0 !important;
}
#top .portfolio-sort-container .slideshow li img {
    opacity: .40 !important;
}
```
It won't work on video thumbnails because of the way they work but it will work on all others I believe.

Regards,

Devin
Posted 6 months ago #
kevin77
Member

thank you Devin!

Posted 6 months ago #
Devin
Moderator

Glad I could help :)

Regards,

Devin

Posted 6 months ago #