How to achieve multiple icon hover transitions over one image

Question

I am trying to achieve two hover effects on an image.

First, when the user hovers over an image a plus icon on the top right corner of the image appears.

Second, when the user hovers over the plus the icon changes to: “Add to collection”.

All these events need to be smooth transitions.

My first problem is I can't get any smooth transitions going for the first hover.

My second problem is I have no idea how to achieve the second hover - I've done a lot of Google searches but this doesn't seem to be a common effect.

Here is the code I have tried so far (with fill murray placeholder image):

HTML:

<div class="item">
      <a href="#" class="item-link">
        <img src="https://www.fillmurray.com/g/582/580" alt="dimsum"> 
      </a>                  
    </div>

CSS:

.item-link:hover:before {
  content: '';
  display: block;  
  position: absolute;
  width: 58px;
  height: 58px; 
    background-image: url('http://i.imgur.com/bWcylV3.png');
  border-radius: 50%;  
  top: 10px;
  right: 10px;
}

And here is the js fiddle

Here is the screenshots for what I want to achieve with the second hover:

It's not possible to :hover a pseudo-element like that so you may have to re-think here and use an actual element....perhaps a span? — Paulie_D
Also, what kind of transition were you looking for.."smooth" doesn't really tell us anything. — Paulie_D
Hi @Paulie_D I am looking to do something similar to the "icon fade" transition used in hover.css: ianlunn.github.io/Hover or the effect created with this bit of css: gist.github.com/anonymous/47815bf25752fe117da0 — neo5_50

Jinu Kurian Jinu Kurian · Accepted Answer · 2016-01-11T11:49:03

Just did a little bit changes in your mark up and and find a solution for your issue. Yes, It's not possible to :hover a pseudo-element. Added a new div btn-plus and a span text for convenience. This is done using pure css. Hope this helps :)

.btn-plus:before {
  content: '';
  display: block;  
  position: absolute;
  width: 58px;
  height: 58px; 
    background-image: url('http://i.imgur.com/bWcylV3.png');
  border-radius: 50%;  
  top: 0px;
  right: 30px;
  z-index: 1;
}
.btn-plus{
  position: absolute;
  display: block;
  width: 200px;
  height: 58px;
  top: 30px;
  right: 0;
  opacity : 0;
  transition: all ease .5s;
}
.item-link{
  width: 100%;
  height: 100%;
  display: block;
}
.item-link img{
  width: 100%;
}
span.text{
  position : absolute;
  top: 0px;
  right: 0px;
  color: #fff;
  padding: 15px;
  width: 150px;
  height: 30px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.5); 
  z-index: 0;
  transition: all ease .5s;
   opacity : 0;
}
.item-link:hover .btn-plus{
   opacity : 1;
}
.btn-plus:hover span{
   opacity : 1;
  right: 30px
}

<div class="item">
      <a href="#" class="item-link">
        <img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
        <div class="btn-plus">
            <span class="text">Add to list</span>
        </div> 
      </a>                  
    </div>

How to achieve multiple icon hover transitions over one image

1 Answers