Resize item upwards instead of downwards css

user_11538925 0
Viewed 34

I have two arrows that get longer when you hover on them. I want the upper arrow to resize upwards when I hover it instead of downwards. Can you solve this issue just with plain CSS or do you need to use javascript? Or is there a completely new way you could resolve this issue?

Here is my code:

Project.js

<div className='root'>
                <div className='project'>
                    <div className='arrow'>
                        <div className='arrow-up'>
                            <div className='up'></div>
                            <div className='mid'></div>
                        </div>
                        <div className='arrow-down'>
                            <div className='midd'></div>
                            <div className='down'></div>
                        </div>
                    </div>
                </div>
            </div>

Project.css

.root{
    padding-top: 30px;
    height: 105vh;
    position: relative;
    background-color: #101010;
}

.arrow{
    position: absolute;
    top: 45%;
    padding-left: 80px;
}

.arrow-up:hover .mid{
    height: 110px;
}

.arrow-up{
    width: 30px;
}

.up {
    width: 0px;
    height: 0px;
    border-bottom: 10px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: none;
}
.mid {
  margin-left:7px;
    width: 2px;
    height: 90px;
    background-color:white;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.arrow-down:hover .midd{
    height: 110px;
}

.arrow-down{
    width: 30px;
}

.midd {
    margin-top: 12px;
    margin-left:7px;
      width: 2px;
      height: 90px;
      background-color:white;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }

.down{
    width: 0px;
    height: 0px;
    border-top: 10px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: none;
}
css html
1 Answers

I found the solution so no need to try and solve this. I added position:absolute in .arrow-up and .arrow-down, I also added bottom: 10% in .arrow-up (I think it doesn't matter what value you have after bottom as long as you have bottom attribute in the class)

Here is the updated code:

.root{
    padding-top: 30px;
    height: 105vh;
    position: relative;
    background-color: #101010;
}

.arrow{
    position: absolute;
    top: 30%;
    padding-left: 80px;
}

.arrow-up:hover .mid{
    height: 110px;
    -webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;
}

.arrow-up{
    width: 30px;
    position: absolute;
    bottom: 10%;
}


.up {
    width: 0px;
    height: 0px;
    border-bottom: 10px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: none;
}
.mid {
  margin-left:7px;
    width: 2px;
    height: 90px;
    background-color:white;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.arrow-down:hover .midd{
    height: 110px;
    -webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;
}


.arrow-down{
    width: 30px;
    position: absolute;
}

.midd {
    margin-top: 12px;
    margin-left:7px;
      width: 2px;
      height: 90px;
      background-color:white;
      -webkit-transition: 0.3s;
      -moz-transition: 0.23;
      -o-transition: 0.3s;
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }

.down{
    width: 0px;
    height: 0px;
    border-top: 10px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: none;
}
user_115389250
Related