Search code examples
htmlcssheightwidthborder

Set width equal to hight

I'd like to create these boxes. The image whitch is by default in the middle should go on top while hover. As they do. But I'd like to have a "Border" around the image whitch was used to darken the box while no hover.

Does anyone have an idea how I can create this "Border"? I haven't found any solution how to set the img-containers width equal to it's height.

As an example on Youtube, but they used a font, i'd like to use a custom image.

* {
  margin: 0;
}

body {
  background-color: #171717;
}

.box {
  margin: 5px;
  display: inline-block;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}

.box .headline {
  position: relative;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.box .headline .img-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.box .headline .img-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  padding: 10%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.box:hover .headline {
  height: 33%;
 }
 
.box:hover .headline .img-container {
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  border-radius: 50%;
}

 
 .box:hover .headline .img-container img {
  height: 70%;
  border-radius: 50%;
}
 
 .box .content {
   opacity: 0;
   padding: 5px;
   max-height: calc(66% - 10px);
   overflow: hidden;
   transition: 0.5s;
  -webkit-transition: 0.5s;
 }
 
.box:hover .content {
    opacity: 1;
  }
<div class="box" style="background-color: rgb(255, 131, 96);">
  <div class="headline">
    <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
  </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>

<div class="box" style="background-color: rgb(125, 206, 130)">
  <div class="headline">
    <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
   </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>

<div class="box" style="background-color: rgb(232, 226, 136)">
  <div class="headline">
        <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
  </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>

<div class="box" style="background-color: rgb(0,255,245)">
  <div class="headline">
        <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
  </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>

Thank you for your help.

Solution

  • So with the help from @g-cyrillus i've created my code:

    * {
  margin: 0;
}

body {
  background-color: #171717;
}

.box {
  margin: 5px;
  display: inline-block;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}

.box .headline {
  position: relative;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.box .headline .img-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.box .headline .img-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.box:hover .headline {
  height: 33%;
 }
 
.box:hover .headline .img-container {
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  border-radius: 50%;
  width: calc(200px * 0.33);/* Height of box multiplied with height of headline (Percentage) */ 
  margin-top: 2%;
}

 
 .box:hover .headline .img-container img {
  border-radius: 50%;
}
 
 .box .content {
   opacity: 0;
   padding: 5px;
   max-height: calc(66% - 10px);
   overflow: hidden;
   transition: 0.5s;
  -webkit-transition: 0.5s;
 }
 
.box:hover .content {
    opacity: 1;
  }
    <div class="box" style="background-color: rgb(255, 131, 96);">
  <div class="headline">
    <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
  </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>

<div class="box" style="background-color: rgb(125, 206, 130)">
  <div class="headline">
    <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
   </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>

<div class="box" style="background-color: rgb(232, 226, 136)">
  <div class="headline">
        <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
  </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>

<div class="box" style="background-color: rgb(0,255,245)">
  <div class="headline">
        <div class="img-container">
      <img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
    </div>
  </div>
  <div class="content">
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
    Lorem ipsum<br />
  </div>
</div>