Becky Becky - 1 month ago 10
CSS Question

Image transition on hover

I am having two different issues. The first is really irritating. I am attempting to align the text with the image inside of the first box, so that they are side-by-side an inline fashion. I am not sure what I am doing wrong and I do not want to use floats.

Secondly, I am attempting to get the image to

transform: translate
on the x-axis on hover. The thing is, I want the image to
transform
on the
.extra-box:hover
...not on the actual image, but I only want the image to move. I cannot figure this out.

What am I doing wrong?



#extra {
margin: 25px auto;
width: 460px;
height: auto;
}
.extra-box {
position: relative;
width: 40%;
padding: 8px;
border-radius: 3px;
/*border: 1px solid #739BAF;*/
border: 2px solid black;
display: inline-block;
background: none;
transition: 0.5s ease;
}
.extra-box:hover {
border: 2px solid red;
transition: 0.5s ease;
}
.extra-box:first-child {
margin-left: 0;
width: 40%;
margin-right: 10%;
}
.extra-box:last-child {
width: 40%;
}
.extra-box a {
text-decoration: none;
}
.extra-box-text {
color: black;
font-size: 1em;
display: inline-block;
width: auto;
}
.extra-box-icon img {
padding-left: 5px;
width: 15px;
height: auto;
display: inline-block;
-webkit-transition: all .5 ease-in-out;
transition: all .5 ease-in-out;
/*transform: translateX(30px);
-webkit-transform: translateX(30px);*/
}

<div id="extra"><div class="extra-box">
<a href="contact">
<div class="extra-box-text">Need help?<br>Contact Us Now</div><div class="extra-box-icon"><img src="icons/right-arrow.png"></div>
</a>
</div><div class="extra-box">
<a href="register">
<div class="extra-box-text">Need an account?<br>Register Now</div>
</a>
</div>
</div>




Answer

As other answers pointed out, you were missing a display: inline-block, but the problem was in .extra-box-icon

I have also added the transform for the image: (See the beginning of the CSS)

.extra-box-icon {
  display: inline-block;
}
img {
  transition: transform 1s;  
}
.extra-box:hover img {
    transform: translateX(-100px);  
}
#extra {
  margin: 25px auto;
  width: 460px;
  height: auto;
}
.extra-box {
  position: relative;
  width: 40%;
  padding: 8px;
  border-radius: 3px;
  /*border: 1px solid #739BAF;*/
  border: 2px solid black;
  display: inline-block;
  background: none;
  transition: 0.5s ease;
}
.extra-box:hover {
  border: 2px solid red;
  transition: 0.5s ease;
}
.extra-box:first-child {
  margin-left: 0;
  width: 40%;
  margin-right: 10%;
}
.extra-box:last-child {
  width: 40%;
}
.extra-box a {
  text-decoration: none;
}
.extra-box-text {
  color: black;
  font-size: 1em;
  display: inline-block;
  width: auto;
}
.extra-box-icon img {
  padding-left: 5px;
  width: 15px;
  height: auto;
  display: inline-block;
  -webkit-transition: all .5 ease-in-out;
  transition: all .5 ease-in-out;
  /*transform: translateX(30px);
	-webkit-transform: translateX(30px);*/
}
<div id="extra">
  <div class="extra-box">
    <a href="contact">
      <div class="extra-box-text">Need help?
        <br>Contact Us Now</div>
      <div class="extra-box-icon">
        <img src="icons/right-arrow.png">
      </div>
    </a>
  </div>
  <div class="extra-box">
    <a href="register">
      <div class="extra-box-text">Need an account?
        <br>Register Now</div>
    </a>
  </div>
</div>

Comments