About This
Show content on hover without pushing the content down. Usually this requires 2 text elements but with this you can keep just the 1 text element. No matter how long the text nor where you want it to stop at.
*Since this is a hover-element, it is Desktop only.
HTML code
The setup is just a row with columns and a icon-box in each column. Important is the hover-show class. We use it to limit the styling to this specific row of elements.
Inside the text you will notice a bit of custom HTML: <div class="ellipsis"> </div>. This element makes the text fade. It is an optional element but makes it visually more inviting to hover.
For the container hover we use the <p> tag. This means that if you have more paragraphs, you will have to use a container around it and adjust the CSS accordingly.
[row label="Desktop" h_align="center" class="hover-show" visibility="hide-for-medium"]
[col span="4" span__sm="12" span__md="6" bg_color="rgb(255,255,255)" bg_radius="10" depth="2"]
[featured_box img="2845" pos="center"]
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident..</p>
<div class="ellipsis"> </div>
[/featured_box]
[/col]
[col span="4" span__sm="12" span__md="6" bg_color="rgb(255,255,255)" bg_radius="10" depth="2"]
[featured_box img="2846" pos="center"]
<h3>Consectetur adipiscing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
<div class="ellipsis"> </div>
[/featured_box]
[/col]
[col span="4" span__sm="12" span__md="6" bg_color="rgb(255,255,255)" bg_radius="10" depth="2"]
[featured_box img="2847" pos="center"]
<h3>Tempor incididunt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="ellipsis"> </div>
[/featured_box]
[/col]
[/row]The CSS
Use the CSS to set the height of the container so you can decide on how much text you will be showing.
.hover-show .icon-box{
padding-top:20px;
padding-bottom:20px;
}
.hover-show .icon-box .icon-box-text{
position: relative;
height: 123px; /* Adjust to needs */
}
.hover-show .icon-box .icon-box-text p{
position: absolute;
max-height: 81px; /* Adjust to needs */
overflow: hidden;
width:100%;
padding:0 20px 20px;
border-radius: 0 0 10px 10px;
}
.hover-show .icon-box .icon-box-text .ellipsis{
position:absolute;
bottom:0;
width:95%;
height:30px;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 10%, #fff 90%);
opacity:1;
}
.hover-show .col:hover .box-shadow-2{
box-shadow: 2px 34px 25px -5px rgba(0,0,0,.36);
z-index:9;
}
.hover-show .icon-box:hover .icon-box-text p{
max-height:500px; /* Adjust to needs (generally no higher than 600px) */
background: #fff;
box-shadow: 2px 34px 25px -5px rgba(0,0,0,.36);
transition: all 0.5s ease;
}
.hover-show .icon-box:hover .ellipsis{
opacity:0;
}
Notes
Elements can be interchanged but require CSS adjustments.
Stay Connected
Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.
Starting a project?
Looking to start a website project for a new Flatsome website or webshop? Already got a Flatsome site but looking to redesign it?
Got a question?
Want to ask a question of request more information on what we do within Flatsome? Shoot us a message or feedback.