CODEWITHSUNDEEP
htmlcsshover
Denver Dang
Denver Dang

Reputation: 2615

Make image or div slide up or down when hovering parent div

I currently have this JSfiddle.

HTML:

    <div class="refTable">
    <div class="refRow">
        <div class="refCell"><img src="images/test.jpg" /><p>Test 1</p></div>
        <div class="refSep"></div>
        <div class="refCell"><img src="images/test.jpg" /><p>Test 2</p></div>
        <div class="refSep"></div>
        <div class="refCell"><img src="images/test.jpg" /><p>Test 3</p></div>
    </div>
</div>

CSS:

.refTable {
    display:table;
    max-width:919px;
    width:100%;
    margin:0px auto;
}
.refRow {
    display:table-row;
}
.refCell {
    display:table-cell;
    width:291px;
    text-align: center;
    font-size:16px;
    border:1px #ffffff solid;
    padding:0px 0px 10px 0px;
    background:#eaeaea;
    color:#333333;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    resize: none;
    outline:0;
    transition-duration: 0.2s;
}
.refCell img {
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
    padding-bottom:5px;
}
.refCell p {
    line-height: 20px;
}    
.refCell:hover {
    border-color:#b32f01;
    background:#ffffff;
    -webkit-transition: color background 0.2s ease-in-out;
    -moz-transition: color background 0.2s ease-in-out;
    -ms-transition: color background -0.8s ease-in-out;
    -o-transition: color background 0.2s ease-in-out;
    transition: color background 0.2s ease-in-out;
    cursor:pointer;
    color:#cacaca;
}
.refCell:hover img {
    opacity:0.4;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity -0.8s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
.refSep {
    display:table-cell;
    width:20px;
}

In the fiddle, no images display in the boxes. However, there normally would be. On hover, the boxes change background color, font color, and, provided there is an image, image opacity. That's fine.

Now, I would like to make it so that, on hover, an image or div "slides" up from the bottom/side/top that says "Visit this website", possibly with some sort of icon.

What is the best approach? I've really been thinking about it, but I can't come up with a solution.

Upvotes: 3

Views: 11594

Answers (1)

Josh Powell
Josh Powell

Reputation: 6297

I did this with just css :hover and css3 transitions.

This is the css I wrote,

.info {
  position: absolute;
  top: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  -webkit-transition: top 0.6s ease-in-out;
  left: 0;
  color: #f7f7f7;
  text-decoration: none;
}

.refCell:hover .info {
  top: 0;
  display: block;
}

I also added this to the .refCell class,

position: relative;
overflow: hidden;

The html I added,

<span class="info">Click to view website</span>

Here is the JSFIDDLE to see how it works.

Upvotes: 10

Related Questions