Overflow: Hidden causing content layout issues - html

Question

I am attempting to create a nice looking text-fade in effect for my website. The issue I am running into is caused by the user of overflow: hidden.
Here is my codepen demonstrating the problem:
https://codepen.io/camerongray6692/pen/zWBqZP
And to satisfy the 'codepen link must be accompanied by code...' rule:
HTML:
<div class="container">
<div class="row">
<h1>Test Heading</h1>
<img src="https://i.imgur.com/5HEZhk0.png" class="imageReplacement"/>
<div class="sectionSubheadings">
<h3 class="test-subheading">This is test text. This is test text. </h3>
<h3 class="test-subheading">This is test text. This is test text. This is test text.</h3>
<h3 class="test-subheading">This is test text.</h3>
</div>
<div class="special-text">
<p>
Suspendisse vel vehicula metus, et tincidunt ex. Nulla egestas cursus accumsan. In vitae egestas felis, id dignissim dui. Etiam scelerisque luctus imperdiet. Duis at mattis tortor. Nam at vulputate lorem. Donec hendrerit tempor pharetra. Nulla efficitur ipsum a lorem faucibus pharetra quis id ante. Sed magna turpis, efficitur vitae fringilla dictum, sollicitudin eget erat. Etiam bibendum sed nunc nec gravida.
</p>
<p>
Quisque pretium lorem molestie lectus mattis ullamcorper. Donec lacinia consequat est nec tempus. Praesent et vehicula lacus. Vivamus arcu ex, vehicula ac diam sit amet, ullamcorper imperdiet leo. Donec pellentesque augue eget molestie pulvinar. Fusce et auctor urna. Vestibulum a fringilla orci.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
<p>
Sed et lorem lobortis, varius est eu, molestie dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc consequat ut dolor sit amet vestibulum. Integer commodo laoreet turpis eu suscipit. Etiam vehicula ex id nibh vulputate vulputate. Suspendisse potenti. Ut ac nisl sed purus hendrerit condimentum.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
</div>
<button class="expand-button">
Continue Reading
</button>
CSS:
.imageReplacement {
background-color: red;
width:225px;
height:225px;
float: right;
margin-left: 25px;
}
.test-subheading {
margin: 0;
padding: 2px 0;
}
.container {
width: 1000px;
}
.special-text {
position: relative;
max-height: 75px;
overflow: hidden;
transition: max-height .5s ease;
}
.special-text.-expanded {
max-height: 1500px;
}
.special-text:not(.-expanded)::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.special-text > p {
font-size: 16px;
margin-top: 15px;
}
jQuery:
$(".expand-button").on("click", function() {
$(".special-text").toggleClass("-expanded");
if ($(".special-text").hasClass("-expanded")) {
$(".expand-button").html("Collapse Content");
} else {
$(".expand-button").html("Continue Reading");
}
});
This is so close to the desired effect I am looking for, but I cannot figure out a way to get the text that appears after the image to wrap and use the space underneath the image.
If I set overflow:hidden to visible, the text wraps as expected. However, then the text does not disappear when clicking 'Collapse Content'. I have tried creating a wrapper around the special-text div and setting overflow-x to visible and setting overflow-y to hidden on the special-text div, but it acts exactly as if overflow was set to hidden.
Trying to change the overflow after the -expanded class has been added to the special-text results in the content moving around in a very jarring way during the animation.
If anyone could provide some guidance on how to accomplish this, that would be awesome.

Answer 1

Ok After tons of trail and error, this is the only way I found to do exactly what you want
pen here https://codepen.io/anon/pen/BrzpgY
This is not that flexible because you have to define a max-height on the container which need to be high enough to show the image but not too high that it shows too much text.
The main issue here is you are trying to show this in an unnatural as far as how the content works. You want the image to show which means it needs to be outside of the content and if it is outside then your floated image won't let your text wrap because the text is in a block element. The element must remain block because you need to give it a max height for animation.
We can't set overflow visible on expand because what it does is it just shows the content right away which is why you see that button in front of text because the text will just show, the animation is useless at this point.
While the below code works but it is not dynamic. I strongly suggest you make a compromise somewhere, either put the image with the text and have the fade hide part of the image or show the text on the left side like you had. The only other option is maybe use js to calculate height on click then set a bunch of things but I really think that is over complication for this
$(".expand-button").on("click", function() {
$(".row").toggleClass("-expanded");
if ($(".row").hasClass("-expanded")) {
$(".expand-button").html("Collapse Content");
} else {
$(".expand-button").html("Continue Reading");
}
});
.imageReplacement {
background-color: red;
width:225px;
height:225px;
float: right;
margin-left: 25px;
position: relative;
z-index: 1;
}
.test-subheading {
margin: 0;
padding: 2px 0;
}
.container {
width: 1000px;
}
.row {
position: relative;
max-height: 320px;
overflow: hidden;
transition: max-height .5s ease;
}
.row.-expanded {
max-height: 1500px;
}
.row:not(.-expanded) .row-content::after {
content: '';
position: absolute;
top: 200px;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.special-text > p {
font-size: 16px;
margin-top: 15px;
}
button {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="row-content">
<h1>Test Heading</h1>
<img src="https://i.imgur.com/5HEZhk0.png" class="imageReplacement"/>
<div class="sectionSubheadings">
<h3 class="test-subheading">This is test text. This is test text. </h3>
<h3 class="test-subheading">This is test text. This is test text. This is test text.</h3>
<h3 class="test-subheading">This is test text.</h3>
</div>
<p>
Suspendisse vel vehicula metus, et tincidunt ex. Nulla egestas cursus accumsan. In vitae egestas felis, id dignissim dui. Etiam scelerisque luctus imperdiet. Duis at mattis tortor. Nam at vulputate lorem. Donec hendrerit tempor pharetra. Nulla efficitur ipsum a lorem faucibus pharetra quis id ante. Sed magna turpis, efficitur vitae fringilla dictum, sollicitudin eget erat. Etiam bibendum sed nunc nec gravida.
</p>
<p>
Quisque pretium lorem molestie lectus mattis ullamcorper. Donec lacinia consequat est nec tempus. Praesent et vehicula lacus. Vivamus arcu ex, vehicula ac diam sit amet, ullamcorper imperdiet leo. Donec pellentesque augue eget molestie pulvinar. Fusce et auctor urna. Vestibulum a fringilla orci.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
<p>
Sed et lorem lobortis, varius est eu, molestie dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc consequat ut dolor sit amet vestibulum. Integer commodo laoreet turpis eu suscipit. Etiam vehicula ex id nibh vulputate vulputate. Suspendisse potenti. Ut ac nisl sed purus hendrerit condimentum.
</p>
<p>
In congue, lacus eget fermentum congue, erat augue accumsan magna, quis euismod nunc enim a odio. Sed sagittis enim pharetra lectus fringilla accumsan. Proin consectetur tellus egestas suscipit posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor pharetra aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin sapien felis, quis lobortis neque molestie eget. Praesent ut felis sit amet velit ultrices venenatis. Vivamus nunc dolor, malesuada eu erat at, malesuada varius diam. Nam ac mi risus.
</p>
</div>
<button class="expand-button">
Continue Reading
</button>
</div>
</div>