Hover image using css

Question

I'm trying to create a hover image for my 'read more' button on blogger. I'm trying to reference:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url' expr:title='data:post.title'><img src='http://3.bp.blogspot.com/-JpvWYCR8FXA/Vp1oL9cD7BI/AAAAAAAAAe4/1PRPh1ASGG8/s1600/extendedreadmore.png'/></a>
      </div>
    </b:if>

with this css:

 .jump-link:hover  {
        background: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg');
    }

but it's not appearing. I've tried several variations and can't seem to find any similar topics that find a solution.

You won't be able to see the background image for the on page image I expect. — Carol McKay
– Carol McKay, Commented Jan 19, 2016 at 11:30

Mukul Kant · Accepted Answer · 2016-01-19 11:32:51Z

1

You can try like this-

.jump-link:hover  {
        background: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg') no-repeat	;
    }
    .jump-link:hover img{opacity:0;}

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url' expr:title='data:post.title'><img src='http://3.bp.blogspot.com/-JpvWYCR8FXA/Vp1oL9cD7BI/AAAAAAAAAe4/1PRPh1ASGG8/s1600/extendedreadmore.png'/></a>
      </div>
    </b:if>

I hope I'll helps you.

answered Jan 19, 2016 at 11:32

Mukul Kant

7,1705 gold badges44 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

twan · Accepted Answer · 2016-01-19 11:29:42Z

0

You are using background as a standalone property.

What you are looking for is:

.jump-link:hover  
    {
        background-image: url('http://1.bp.blogspot.com/-i936l-GupbU/Vp4Z9y7tpAI/AAAAAAAAAgw/lyJYJds5PNc/s1600/readmorerollover.jpg');
    }

More information Here

answered Jan 19, 2016 at 11:29

twan

2,67912 gold badges45 silver badges120 bronze badges

Collectives™ on Stack Overflow

Hover image using css

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related