CODEWITHSUNDEEP
css
AndrewS
AndrewS

Reputation: 1565

Transition on background image on mouse over

I want to achive a simple transition on my link background which is image, so that when I hover it the background image should rotate a bit.

this is waht I have, but its not working:

<div class="vegetable"><a href="#">link</a></div>

.vegetable a {
    background: url(../img/icons/carrot.png) no-repeat ;
    padding-left: 40px;
    color: #fff;
    font-size: 2em;
    line-height: 42px;
    background-size: 32px;
    width: auto;

    /* Firefox */
    -moz-transition: all 1s ease;
    /* WebKit */
    -webkit-transition: all 1s ease;
    /* Opera */
    -o-transition: all 1s ease;
    /* Standard */
    transition: all 1s ease;


}
.vegetable a:hover {

    /* Firefox */
    -moz-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* WebKit */
    -webkit-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Opera */
    -o-transform: scale(1.1) rotate(30deg) translate(-5px);
    /* Standard */
    transform: scale(1.1) rotate(30deg) translate(-5px);
}

Upvotes: 1

Views: 952

Answers (1)

Chiller
Chiller

Reputation: 9738

To get the result you are looking for you need to use pseudo element for the background and rotation, this way you don't affect the link

See snippet:

.vegetable a {
  padding: 40px;
  color: #fff;
  font-size: 2em;
  line-height: 42px;
  background-size: 32px;
  width: auto;
  position:relative;
  display:inline-block;
  overflow:hidden;
}

.vegetable a:after {
  content:'';
  background: url(https://www.w3schools.com/css/img_fjords.jpg) no-repeat;
  background-size: cover;
  /* Standard */
  transition: all 1s ease;
  display:inline-block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  
}


.vegetable a:hover:after {
  /* Standard */
  transform: scale(1.1) rotate(30deg) translate(-5px);
}
<div class="vegetable"><a href="#">link</a></div>

Upvotes: 2

Related Questions