CODEWITHSUNDEEP
csshtml
Billy Rammal
Billy Rammal

Reputation: 115

How to make div transition move on hover and reveal new div

I'm trying to make a child div (.imagehead) slide to the left (about 25%) on hover of the parent div (#bite) and reveal another div (Name not decided, but I want it to be 2-3 lines of text) to the right of (.imagehead), relative to where (.imagehead) is.

I haven't coded in a while, sorry if this is extremely simple and I just can't solve this.

Here is the code itself (a tumblr theme I'm messing with)

<div id="headbox">
<div class="top">
    <div class="nav">
        <div align="center">
            <BR/>
            <BR/>
                <div class="headimage"><img src="http://s24.postimg.org/gqgjloln9/head.png"></div>
                <div id="transitiontext">I want to show this when "headbox" is hovered on, moving "headimage" to the left 25% and revealing this text next to it</div>
            <BR/>
            <BR/>
        </div>
    </div>
</div>


#headbox {
top: 30px;
}

#headbox:hover .headimage {
left: 25%;
}

http://jsfiddle.net/bko87pk9/

Upvotes: 0

Views: 157

Answers (2)

misterManSam
misterManSam

Reputation: 24692

  • The image is made position: absolute to remove it from the normal flow. The text will now display underneath.

  • The nav container is made position: relative so that its absolute children will position themselves in relation to it and not the body

  • The image is moved on hover and the transition creates a smooth animation to display the text

Examples

Example 1

In this example, the text needs to be contained in a box the same height and width of the image so it does not peek out from underneath.

.nav {
  height: 100px;
  position: relative;
}
.headimage {
  position: absolute;
  transition: left 0.5s;
  left: 0;
}
.nav:hover .headimage {
  left: 25%;
}
.transitiontext {
  width: 25%;
}
<div class="nav">
  <img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
  <div class="transitiontext">This text needs to be contained properly.</div>
</div>

Example 2

In this example, the text can spill out underneath as it will be hidden with opacity: 0. On hover the opacity is changed to opacity: 1 with a smooth transition.

The opacity value changes the z-value of the text div, so we need to declare z-index values (higher will display on top of lower)

pointer-events: none prevents the hover from activating when hovering the hidden text.

.nav {
  height: 77px;
  /* height of image */
  position: relative;
}
.headimage {
  position: absolute;
  transition: left 0.5s;
  left: 0;
  z-index: 2;
}
.nav:hover .headimage {
  left: 25%;
}
.transitiontext {
  width: 25%;
  transition: opacity 0.5s;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.nav:hover .transitiontext {
  opacity: 1;
}
<div class="nav">
  <img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">

  <div class="transitiontext">This text does not need to be contained as it will be hidden until the hover state is activated. This text does not need to be contained as it will be hidden until the hover state is activated.</div>


</div>

Upvotes: 1

user4051844
user4051844

Reputation:

I am sorry for any not working code, I crested this on my phone.

<div id="test">
Hover on this div.
</div>

#test {
height: 100px;
width: 200px;
background-color: #F1F1F1;
-webkit-transition: 
all 1s ease-in-out
all 1s linear;
-moz-transition:
all 1s ease-in-out
all 1s linear;
-ms-transition:
all 1s ease-in-out
all 1s linear;
-o-transition:
all 1s ease-in-out
all 1s linear;
transition:
all 1s ease-in-out
all 1s linear;
}
#test:after {
height: 100px;
width: 200px;
content: "Second div.";
display: none;
background-color: #F9F9F9;
position: absolute;
top: 0px;
left: 210px;
}
#test:hover:after {
display: block;
}

Upvotes: 0

Related Questions