CODEWITHSUNDEEP
htmlcssimagehover
fabio_p
fabio_p

Reputation: 15

Image effect on hover interfering with text caption

Good afternoon

I'm building an image gallery based on a jquery grid provided by GREENTREELABS (http://www.final-tiles-gallery.com/gallery-with-captions-and-sharing.html).

I need a picture-bluring effect when hovering over the tile-inner class but without bluring the caption or icons at the bottom too (attached picture-link). Is this possible with the current HTML markup? I've Tried a few things with CSS only and with jquery but I always blur everything - changing the picture is only an option if everything else fails.

Someone has a good idea? Any help is appreciated - this is probably a common problem with a specific name I can search after?

<div class='tile'>
    <figure>
        <a class='tile-inner' href='img/originals/001.jpg' >
            <img class='item' src='img/thumbs/001.jpg alt='hello world' />
            <span class='title'>Hello World</span>
            <span class='subtitle'>
                <p class='subsub'>Info 1</p>
                <p class='subsub'>Info 2</p>
                <p class='subsub'>Info 3</p>
            </span>
        </a>
    </figure>
    <div class='social'>;
        <a href='#' data-social='twitter'><i class=''></i></a>
        <a href='#' data-social='facebook'><i class=''></i></a>
        <a href='#' data-social='pinterest'><i class='-circled'></i></a>
    </div>
</div>

left side gallery overview, left side pic on hover. Hover for description

None of the 3 ways are working correctly, the last is the best but hovering on the span removes the blur effect. check the 3 ways

Greeetings Fabio

Upvotes: 0

Views: 112

Answers (3)

Turnip
Turnip

Reputation: 36642

If you only want to effect the img, only target the img:

.tile-inner:hover img {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
}
<div class='tile'>
    <figure>
        <a class='tile-inner' href='img/originals/001.jpg' >
            <img class='item' src='http://placekitten.com/200/300' alt='hello world' />
            <span class='title'>Hello World</span>
            <span class='subtitle'>
                <p class='subsub'>Info 1</p>
                <p class='subsub'>Info 2</p>
                <p class='subsub'>Info 3</p>
            </span>
        </a>
    </figure>
    <div class='social'>;
        <a href='#' data-social='twitter'><i class=''></i></a>
        <a href='#' data-social='facebook'><i class=''></i></a>
        <a href='#' data-social='pinterest'><i class='-circled'></i></a>
    </div>
</div>

Upvotes: 1

Adrian
Adrian

Reputation: 320

I dont know how you css looks like, but you can try adding this in your css file:

`.item:hover{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);`
}

Upvotes: 0

user5965382
user5965382

Reputation:

You can use filter blur

with CSS.

Upvotes: 0

Related Questions