Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #17333

    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.

    #95067

    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.

    #95068

    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

    #95069

    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?

    #95070

    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

    #95071

    thank you Devin!

    #95072

    Glad I could help :)

    Regards,

    Devin

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘hover opacity’ is closed to new replies.