CODEWITHSUNDEEP
htmlcss
prime90
prime90

Reputation: 959

How do I expand/transition a div with mouseover?

I'm trying to obtain the same result that is located here where the user can mouse over the layer icon in the upper right-hand corner and a div expands/transitions with information.

I created two divs, one for the icon and one for the information but I'm not sure how to create the mouseover effect.

Here is my JSFiddle if anyone is interested in helping me out. Thanks! https://jsfiddle.net/prime90/vwqs38gL/20/

HTML

<div class=icon>
        <img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
    </div>
    <div class="card-body">
        <b>Railroad Layers</b>
        <div class='train-layer-options'>
            <div class="layer-line tracks"></div>
            <span class="layer-text">Tracks<br></span>
            <div class="layer-fill one-mile"></div>
            <span class="layer-text">Sound Buffer (1 mile)<br></span>
            <div class="layer-fill half-mile"></div>
            <span class="layer-text">Sound Buffer (1/2 mile)<br></span>
            <div class="layer-fill onehun-yrds"></div>
            <span class="layer-text">Sound Buffer (100 yards)<br></span>
        </div>

CSS

.icon{
         height: 48px;
         width: 48px;
    }
     .img{
         width:48px;
         height:48px;
    }
     .card {
         background: black !important;
         box-shadow: 5px 10px 18px #888888;
    }
     .card-body {
         background:#f5f5f5;
         font-size: 14px;
    }

Upvotes: 0

Views: 38

Answers (3)

nonopolarity
nonopolarity

Reputation: 150976

You can move .card-body inside .icon and have

.icon:hover .card-body {
  opacity: 1;
}

Example: https://jsfiddle.net/7vdq89g0/

To cover the image up, use positive: relative for the container and position: absolute; top: 0; left: 0 for the box that shows up. Example: https://jsfiddle.net/7vdq89g0/1/

To make hovering not effective to the right of the image (because the box that shows up makes the "hover" event fire up when user hovers on that box that is wider), just make it visibility: hidden and to visible when hover: https://jsfiddle.net/7vdq89g0/2/

.icon {
  height: 48px;
  width: 48px;
  position: relative;
}

.img {
  width: 48px;
  height: 48px;
}

.card {
  background: black !important;
  box-shadow: 5px 10px 18px #888888;
}

.card-body {
  background: #f5f5f5;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  /* display: none */
}

.card-header {
  text-align: center;
}

.icon:hover .card-body {
  opacity: 1;
  visibility: visible;
  /* display: block; */
}

.layer-text {
  display: block;
  text-indent: 40px;
}

.btn {
  color: #f5f5f5 !important;
}

.layer-fill {
  float: left;
  width: 25px;
  height: 15px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  position: absolute;
}

.one-mile {
  background: #76d7c4;
  opacity: .5;
}

.half-mile {
  background: #f7dc6f;
  opacity: .5;
}

.onehun-yrds {
  background: #ec7063;
  opacity: .5;
}


/* line icons for legend */

.layer-line {
  border: 0;
  width: 25px;
  height: 1px;
  cursor: pointer;
  margin-top: 11px;
  margin-left: 5px;
  display: inline-block;
  position: absolute;
}

.tracks {
  background-color: #000;
}

.hclanes {
  background-color: #3498db;
  height: 2px;
}

.lclanes {
  background-color: #3498db;
}

.paved {
  background-color: #138d75;
  height: 2px;
}

.natural {
  /*10px color then 2px transparent -> repeat this for dash lines!*/
  background: repeating-linear-gradient(to right, #138d75 0, #138d75 11px, transparent 11px, transparent 14px)
}
<!DOCTYPE html>
<html>

<body>
  <div class=icon>
    <img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>

    <div class="card-body">
      <b>Railroad Layers</b>
      <div class='train-layer-options'>
        <div class="layer-line tracks"></div>
        <span class="layer-text">Tracks<br></span>
        <div class="layer-fill one-mile"></div>
        <span class="layer-text">Sound Buffer (1 mile)<br></span>
        <div class="layer-fill half-mile"></div>
        <span class="layer-text">Sound Buffer (1/2 mile)<br></span>
        <div class="layer-fill onehun-yrds"></div>
        <span class="layer-text">Sound Buffer (100 yards)<br></span>
      </div>
      <b>Bike Lane Layers</b>
      <div class='bike-layer-options'>
        <div class="layer-line hclanes"></div>
        <span class="layer-text">High Comfort Lanes<br></span>
        <div class="layer-line lclanes"></div>
        <span class="layer-text">Low Comfort Lanes<br></span>
      </div>
      <b>Multiuse Trail Layers</b>
      <div class='bike-layer-options'>
        <div class="layer-line paved"></div>
        <span class="layer-text">Paved Trails<br></span>
        <div class="layer-line natural"></div>
        <span class="layer-text">Natural Trails<br></span>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

darkhouse
darkhouse

Reputation: 205

.icon {
  height: 48px;
  width: 48px;
}

.icon:hover~.card-body {
  display: block;
}

.img {
  width: 48px;
  height: 48px;
}

.card {
  background: black !important;
  box-shadow: 5px 10px 18px #888888;
}

.card-body {
  background: #f5f5f5;
  font-size: 14px;
  display: none;
}
I'm trying to obtain the same result that is located here where the user can mouse over the layer icon in the upper right-hand corner and a div expands/transitions with information. I created two divs, one for the icon and one for the information but
I'm not sure how to create the mouseover effect. Here is my JSFiddle if anyone is interested in helping me out. Thanks! https://jsfiddle.net/prime90/vwqs38gL/20/ HTML

<div class=icon>
  <img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
</div>
<div class="card-body">
  <b>Railroad Layers</b>
  <div class='train-layer-options'>
    <div class="layer-line tracks"></div>
    <span class="layer-text">Tracks<br></span>
    <div class="layer-fill one-mile"></div>
    <span class="layer-text">Sound Buffer (1 mile)<br></span>
    <div class="layer-fill half-mile"></div>
    <span class="layer-text">Sound Buffer (1/2 mile)<br></span>
    <div class="layer-fill onehun-yrds"></div>
    <span class="layer-text">Sound Buffer (100 yards)<br></span>
  </div>

Upvotes: 0

Adam
Adam

Reputation: 361

If you just need a more width on div when hover, try this

<div class="default"></div>

.default {
 width: 150px;
 height: 100px;
 background-color: teal;
 transition: all 0.5s ease;

 ::hover {
 width: 200px;
 transition: all 0.5s ease;
 }
 }

Upvotes: 0

Related Questions