Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read More" centered on mouseover. Any suggestions on how to achieve this? The divs are actually horizontal on the page, not sure why they appear vertical here.
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
</div>
</div>
</div>