CODEWITHSUNDEEP
htmlcss
Ricardo
Ricardo

Reputation: 85

How add margins/padding to a image:hover

What is the easy way to place an image on top of text when they mouse over (hover) \

I was trying like this but it not working.

.nav-justified li:hover>a
{
    background:url(../images/circle-hover.png) center no-repeat;
    padding-bottom:-50px !important;
}

HTML

<nav id="topNav" role="navigation" aria-label="Top Navigation">
  <ul class="nav nav-justified">  
    <li><a href="#">Home</a></li> 
  </ul> 
</nav>  

  O (circle-hover)
 LINK

Upvotes: 0

Views: 186

Answers (2)

user4445828
user4445828

Reputation:

You can use jQuery .hover. Make sure you replace ENTER URL HERE with the path to your image file.

$(document).ready(function(){
    $(".box").hover(function(){
        $(this).css("background-image", "url(ENETR URL HERE)");
    },
    function(){
        $(this).css("background", "#FFF");
    });
});
.box{
  width:200px;
  height:200px;
  border: 1px solid black;
}
<html>

<head>

  <link rel="stylesheet" href="css/style.css">


</head>
<body>


  <div class="box">
    
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/script.js"></script>



</body>
</html>

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

Use a :pseudo-element for the background-image and give it a higher z-index: 1.

.nav-justified li:hover > a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/circle-hover.png) center no-repeat;
    z-index: 1;
}

Demo:

a {
  position: relative;
}
a:hover:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://lorempixel.com/30/10);
  z-index: 1;
}
<a href="#">Link</a>

Upvotes: 2

Related Questions