23

I've read around and tried other solutions to my problem but none seem to work.

I have 3 images, each within their own 4-column div. I have a css transition set up so that these images fade from grayscale to colour when the user's mouse hovers over the image. I now need to get a button to appear on hover. I have attached an image to illustrate what I mean.

enter image description here

And here is a snippet of my HTML and CSS for the middle 4 columns.

---------------------HTML---------------------

<div class="small-4 columns">
    <img src="/wp-content/themes/adamslaw/assets/img/woman.png">
    <a class="button" href="/jane/">View Jane's Profile</a>
</div>

---------------------CSS---------------------

.greyish {
background: $smoke !important;
h1 {
    margin: rem-calc(100) 0 0;
}
img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
  .button:hover {
    display: inline-block;
    }
  }
}

NOTE: I am using SCSS, hence the strange-looking, nested CSS rules.

3
  • 1
    I'd put the hover on a wrapper element, then use that to change the image and show the button.
    – DBS
    Nov 30, 2016 at 15:05
  • If .button is initially display: none, there is no way for a user to hover on it, which your SCSS requires for the display property to change. Try removing the :hover from .button and play with it. Nov 30, 2016 at 15:07
  • @BjornJohnson that wasn't supposed to be in there! I forgot to remove it when I was taking all of the failed code out.
    – E.Owen
    Nov 30, 2016 at 15:35

5 Answers 5

42

Here you go:

.button {
    display: none;
}

img:hover + .button, .button:hover {
    display: inline-block;
}

By doing this, we're using the adjacent sibling css selector +. The selector is pretty simple: on image "hovering", you select .button (its sibling) and display it. Here, I added .button:hover so that when the user "hovers" the button, it keeps it visible (prevent a blinking effect as the user moves the mouse over the button).

1
  • 1
    Superb. Thanks @H4ris, this is exactly what I needed.
    – E.Owen
    Nov 30, 2016 at 15:32
16

You could use a simple img:hover + .button to select the link (the + selects the next element if it matches the .button selector)

.button {
  display: none;
}
img:hover + .button {
  display: inline-block;
}
<div class="small-4 columns">
  <img src="http://placehold.it/350x150">
  <a class="button" href="/jane/">View Jane's Profile</a>
</div>

Alternatively if the button isn't over the image, you could use :hover on a wrapper element, which avoids the problem of the image no longer being hovered when you want to click the button (the button would disappear when you try to click it, as seen in the above example)

.button {
  display: none;
}
.wrapper:hover img {
  /* Change the filter in here */
}
.wrapper:hover .button {
  display: inline-block;
}
<div class="small-4 columns">
  <div class="wrapper">
    <img src="http://placehold.it/350x150">
    <a class="button" href="/jane/">View Jane's Profile</a>
  </div>
</div>

4

You can set class to the image container and show the button on hover the image container.

Please check this link with working example:

.img-container:hover .button {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

2

here you go my friend:

div.small-4.columns img ~ a  {display:none;}
div.small-4.columns img:hover ~ a {display:block;}

UPDATE:

if you want the button to be clickable and not dissapear until you remove the move from the picture, use the following instead:

a.button {display: none;}
div.small-4.columns:hover > a.button {display:block;}

EXPLANATION:

a.button is to select the a with class .button
div.small-4.columns:hover selecting the div that has both classes .small-4 and .columns (parent of image)

> means child and ~ means sibling, in this case div.small-4.columns:hover > a.button {display:block;} we're telling it to display the child element which is a.button, when we hover div.small-4.columns

0

This worked for me: HTML :

                    <div>
                        <div class="hovereffect">
                            <img style="height: 320px; width: 250px" src="xx" alt="xxx">
                            <div class="overlay">
                                <h2>image</h2>
                                <a class="info" href="xxx">open</a>
                            </div>
                        </div>
                    </div>

CSS :

.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
}

.hovereffect img {
    display: block;
    position: relative;
    -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
}

.hovereffect h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(-100px);
    -ms-transform: translatey(-100px);
    transform: translatey(-100px);
    -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    padding: 10px;
}

.hovereffect a.info {
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    margin: 50px 0 0;
    padding: 7px 14px;
}

.hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
}

.hovereffect:hover img {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
}

.hovereffect:hover h2,
.hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0);
}

.hovereffect:hover a.info {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.