Question 42901 in Html Question posted in
Some basic documentation can be found here.

div moves other divs when size expands – Html

i’m trying to build a row of divs where a div will expand when a mouse hovers over it.
It got that so far but i want that the expanding div is not moving the other divs around (changing there size) but to expand over his neigbours, partly covering them.

i hope you get what i mean..

i also would like to keep the js part because there should happen more stuff when hovering over the elements.

here is my code so far:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <style>
        .wrap{
            font-size: 160px;
            font-weight: bold;
            height: 450px;
            width: 1100px;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-style: solid;
            border-width: 1px;  
        }
        .a{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .b{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .c{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .d{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .e{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
    </style>
    <script type="application/javascript">
        function enlarge(id){
            /*console.log("enlarge: " + id);*/
            var element = document.getElementById(id);
            element.style.height = "440px";
            element.style.width = "260px";
            element.style.borderWidth = "1px";
            element.style.borderStyle = "solid";
            
        }
        function reduce(id){
            /*console.log("reduce: " + id);*/
            var element = document.getElementById(id);
            element.style.height = "350px";
            element.style.width = "220px";
            element.style.borderWidth = "1px";
            element.style.borderStyle = "solid";
        }
    </script>
</head>
<body>  
    <center>
    
        <div class="wrap">
            <div class="a" id="a" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">A</div>
            <div class="b" id="b" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">B</div>
            <div class="c" id="c" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">C</div>
            <div class="d" id="d" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">D</div>
            <div class="e" id="e" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">E</div>
        </div>
    
    </center>
</body>
</html>

also on jsfiddle:
https://jsfiddle.net/fkdvptuz/

Tags:

2

Answers


  1. 0

    Simply add a wrapper div that stores the real size for each, set its position to relative then set the position of each expanding div to absolute.

    Something like this:
    html

    <center>
  <div class="wrap">
    <div class="growing-wraper">
      <div class="expanding-el a" id="a" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">A</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el b" id="b" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">B</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el c" id="c" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">C</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el d" id="d" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">D</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el e" id="e" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">E</div>
    </div>
  </div>
</center>

    .wrap {
    font-size: 160px;
    font-weight: bold;
    height: 450px;
    width: 1100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-style: solid;
    border-width: 1px;
  }
  .growing-wraper {
    width: 220px;
    height: 350px;
    position: relative;
  }

  .expanding-el {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .expanding-el:hover {
//This will give an effect of overlap neighbor element
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); 

//This will overlap 
    z-index: 1;
  }

  .a {
    border-style: solid;
    border-width: 1px;
  }

  .b {
    border-style: solid;
    border-width: 1px;
  }

  .c {
    border-style: solid;
    border-width: 1px;
  }

  .d {
    border-style: solid;
    border-width: 1px;
  }

  .e {
    border-style: solid;
    border-width: 1px;
  }

    Also if you only want to increase the size of the element while hovering, you use transform:scale(1.5) CSS properties. You do not need to have a long CSS hassle code.

    Hope this helps 🙂

    Login or Signup to reply.
  2. 0

    To achieve behaviour you desire, you need to change particular div’s size using CSS’s property translate: scale() instead of changing width and height directly, you can still keep onmouseover and onmouseout event handlers for other logic, but scaling will be done using CSS.

    Here is the link to jsfiddle, I just have added block class to every div:

    .block:hover {
  transform: scale(1.2)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search