CODEWITHSUNDEEP
csshover
Minghui Yu
Minghui Yu

Reputation: 1363

CSS on hover image blinking issue

I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?

In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.

I need to hide the image when mouse hovers.

http://jsfiddle.net/fveqkcnj/

<div class="categorywrapper">
  <div class="views-row views-row-1 views-row-odd views-row-first">
    <h3 class="term-title">    
      <a href="/categories/arts-culture">Arts &amp; Culture</a>
    </h3>

    <div class="term-desc">
        <p>This is Arts &amp; Culture</p>
    </div>
    <div class="term-image"> <a href="#"><img src="http://placehold.it/235x150/ffffee" /></a>

    </div>
</div>


.categorywrapper {
    width: 720px;
    clear:both;
}
.categorywrapper .views-row {
    float:left;
    position:relative;
    width:235px;
}
.categorywrapper .views-row h3 {
    position:relative;
    margin-left:30px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #000;
    width:80%;
    min-height:38px;
}
.categorywrapper .views-row .term-desc {
    position:relative;
    top:100px;
    left:20px;
    width:200px;
}
.categorywrapper .views-row .term-image {
    position:relative;
}
.categorywrapper .views-row .term-image:hover {
    z-index:-2;
}

Upvotes: 0

Views: 8823

Answers (3)

connexo
connexo

Reputation: 56754

I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.

Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.

Then

.categorywrapper .views-row .term-image:hover .term-desc {
    opacity: 1;
}

To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;

http://jsfiddle.net/fveqkcnj/5/

Upvotes: 0

MiltoxBeyond
MiltoxBeyond

Reputation: 2731

Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc

Basically the result is:

.categorywrapper .views-row .term-desc {
    pointer-events:none;
    position:relative;
    top:100px;
    left:20px;
    width:200px;
}

Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.

You can fix that by instead of applying the following css to the row instead of the image: 

.categorywrapper .views-row:hover .term-desc {
    z-index:2;
}

Here is the JSFiddle

If you want it over the image do the same but put the .term-desc element inside the tag.

Upvotes: 5

Stephen Poley
Stephen Poley

Reputation: 67

I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.

Upvotes: 0

Related Questions