Issues getting hover to show different content

Question

I am attempting to replicate a piece of a page. The site I am referring to this website.

If you scroll about halfway down on the homepage, you will see green squares. I am trying to do something like that. When you hover over the green boxes you will see they change to purple, the hover effect seems to fade in from the middle and the general theme changes. I am having difficulties trying to get the same effect.

I am running into these issues.

I am unsure of how to get the fade-in from the middle effect.
I cannot get my description to change when hovered over.
I seem to have padding/margin issues between my blocks, but am unsure of where that is coming from since I set the margin/padding to 0.

I appreciate the help.

.box-container {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}
.blue-box, .red-box {
  height: 300px;
  width: 25%;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.blue-box:hover, .red-box:hover {
  background-color: purple;
  cursor: pointer;
}
.blue-box {
  background-color: blue;
}
.red-box {
  background-color: red;
}
.insideBoxWrap {
 padding: 50px 25px;
}
.box-title {
  color: #FFF;
  font-size: 2.2em;
}
.box-description {
  padding-top: 10px;
  color: green;
  font-size: 1.5em;
}
.box-description:hover {
  display: none;
}
.box-description-hover {
  display: none;
}
.box-description-hover:hover {
  display: block;
  color: #000;
  font-size: 1.1em;
}

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
</div>

score 1 · Answer 1 · edited May 23 '17 at 10:28

I am unsure of how to get the fade-in from the middle effect.

Not sure what exactly you want, but here is how you can do a simple ease in out transitions:

transition: all .5s ease-in-out;

I cannot get my description to change when hovered over.

.parent:hover .child {...}

I seem to have padding/margin issues between my blocks, but am unsure of where that is coming from since I set the margin/padding to 0.

It's browser renders white space for inline* elements, more here.

Quick fix - .parent {font-size:0;} .child {font-size:16px;}

.box-container {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
}
.blue-box, .red-box {
  font-size: 16px;
  height: 300px;
  width: 25%;
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: top;
  transition: all .5s ease-in-out;
}
.blue-box:hover, .red-box:hover {
  background-color: purple;
  cursor: pointer;
}
.blue-box {
  background-color: blue;
}
.red-box {
  background-color: red;
}
.insideBoxWrap {
 padding: 50px 25px;
}
.box-title {
  color: #FFF;
  font-size: 2.2em;
}
.box-description, .box-description-hover {
  padding-top: 10px;
  color: green;
  font-size: 1.5em;
}
.box-description-hover {
  display: none;
}
.insideBoxWrap:hover .box-description-hover {
  display: block;
}
.insideBoxWrap:hover .box-description {
  display: none;
}

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="blue-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
  <div class="red-box">
    <div class="insideBoxWrap">
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      <div class="box-description-hover">Hover View</div>
    </div>
  </div>
</div>

Do you know why my hover is creating a padding from the top of the page? https://jsfiddle.net/#&togetherjs=42s5CxpkUk — Paul, Jan 09 '16 at 03:44
Add `vertical-align:top;` to the inline blocks. The reason is - the smaller font you set on hover causes the box to have a smaller height, and the default value is `baseline`. — Stickers, Jan 09 '16 at 04:01
Gotcha! So, the `vertical-align: top;` places the box-container all the way to the top of the end of another div or the margin placed? — Paul, Jan 09 '16 at 04:01
It's relative to the sibling elements, normally the tallest one. — Stickers, Jan 09 '16 at 04:03

score 1 · Answer 2 · answered Jan 09 '16 at 03:53

Here is what you are looking for. Mind you, once you start using it in a group, because of the positioning, You may run into trouble. I looked at the site and it looked like a Wordpress plugin. If that is the case, you can count on something like this being built with a much larger CSS and some JQuery to back up some of the front end positioning bugs and most importantly the height. You can see some of their scripting here

But this should get you started into something.

Here is the HTML

<div class="item">
    <div class="item-main">
        <span class="ico ico3"></span>
        <h1>TEXT</h1>
    </div>
    <div class="item-hover">
        <h2>MY HOVER TEXT</h2>
        <p>Look what I can do.</p>
    </div>
</div>

And the CSS

.item {
    background-color: #77cd8a;
    cursor: pointer;
    padding:20px 20px 60px;
    width:25%;
    height:50%;
    position:absolute;
    top:0;
}

.item:hover{
    height:50%;
}
.item-hover{
    opacity:0;  
    transform: scale(.7);
}
.item:hover .item-hover{
    opacity:1;  
    width:94%;
    height:130%;
    position:relative;
    top:-138px;
    right:-9px;
    padding:20px 20px 60px;
    background-color: #945692;
    box-sizing: border-box;
    transform: scale(1.2);
    transition: opacity .5s ease-out, transform .5s ease-out;
}

h1, h2{
    text-align:center;
    font-size:30px;
    margin-top:70px;
}

Here is the DEMO

@Paul I looked over it briefly, but some of it yes. Not sure what was the script really handling. I know the transitions are CSS, but I wouldn't be surprised if they are using JS to make sure all these boxes don't fall out of place, considering they all have position absolutes — LOTUSMS, Jan 09 '16 at 04:03

repzero · Answer 3 · 2016-01-09T12:44:57.260

After carefully examining the codes at http://isadoradesign.com/.

I noticed that the box elements that had the fade out was not actually fading out. There was a duplicate purple box hidden inside. each purple box that changed its opacity and use transform:scale to do its magic. Nevertheless, I decided to recreate the effect from scratch.

For each box I placed a hidden cloned box with purple color inside
On hovering over the parent. The clone box that is centered will fade in and expand

Below is a specimen of the box on the website. when I slowed down the transition and examine the element codes I found a way

snippet below

.box-container {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}
.blue-box, .red-box {
  display:inline-table;
  height: 150px;
  width: 25%;
  padding: 0;
  margin: 0;
}
.blue-box {
  background-color: blue;
}
.red-box {
  background-color: red;
}

.insideBoxWrap:hover .box-description-hover{
   display:table-cell;
  position:absolute;
   width:100%;
  height:100%;
  opacity:1;
  left:0px;
  top:0px;
  background:purple;
  vertical-align:middle;
}


.insideBoxWrap {
  display:table-cell;
 position:relative;
 width:100%;
 height:100%;
 text-align:center;
 
}
.box-title {
  color: #FFF;
  font-size: 2.2em;
}


.box-description-hover {
  display:block;
  position:absolute;
  width:50%;
  height:60%;
  top:20%;
  left:25%;
  opacity:0;
  vertical-align:middle;
transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
}
.box-description-hover:nth-child(1){
  position:table-cell;
  vertical-align:middle;
}

<div class="box-container">
  <div class="blue-box">
    <div class="insideBoxWrap">
    <div class="box-description-hover">
       <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
    </div>
      <div class="box-title">Box 1</div>
      <div class="box-description">Normal View</div>
      
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
    <div class="box-description-hover">
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
    </div>
      <div class="box-title">Box 2</div>
      <div class="box-description">Normal View</div>
    </div>
  </div><div class="blue-box">

    <div class="insideBoxWrap">
      <div class="box-description-hover">
        <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
      </div>
      <div class="box-title">Box 3</div>
      <div class="box-description">Normal View</div>
    </div>
  </div><div class="red-box">
    <div class="insideBoxWrap">
    <div class="box-description-hover">
     <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
    </div>
      <div class="box-title">Box 4</div>
      <div class="box-description">Normal View</div>
      
    </div>
  </div>
</div>

Issues getting hover to show different content

3 Answers3