How to make padding not apply to one element? - html

Question

I want to make an effect where when you hover over it, an overlay slides up. I have a card and it has padding. I want the overlay to be 100% of the card's width but the padding on it makes it thinner.
I have created a quick example to show the issue (note: the ".read" class with the blue background is what I'm talking about):
.card h2 {
padding-top: 1em;
}
.card img {
width: 100%;
height: 25em;
}
.card {
width: 50%;
float: left;
background: #e5e5e5;
padding: 2em;
margin: 1em;
box-sizing: border-box;
cursor: pointer;
transition: all 300ms ease;
overflow: hidden;
}
.read {
color: white;
background: blue;
height: 40px;
}
<div class="card">
<img src="https://prodimage.images-bn.com/pimages/9781338659511_p0_v1_s550x406.jpg">
<h2>Integer Sagittis</h2>
<p>Integer Sagittis</p>
<div class=read>
<p>Read more</p>
</div>
</div>
Does anyone know how to make the overlay 100% of the card's width?

Answer 1

You can even out the padding by giving the .read a negative margin.
I also implemented how you should do the hovering part, here's the example, you can try to hover on the card:
.card h2 {
padding-top: 1em;
}
.card img {
width: 100%;
height: 25em;
}
.card {
--padding: 2em;
width: 50%;
float: left;
background: #e5e5e5;
padding: var(--padding);
margin: 1em;
box-sizing: border-box;
cursor: pointer;
transition: all 300ms ease;
overflow: hidden;
}
.read {
color: white;
background: blue;
height: 40px;
margin: calc(var(--padding) * -1);
margin-top: 0;
transform: translateY(100%);
transition: transform .2s;
}
.card:hover .read{
transform: translateY(0);
}
<div class="card">
<img src="https://prodimage.images-bn.com/pimages/9781338659511_p0_v1_s550x406.jpg">
<h2>Integer Sagittis</h2>
<p>Integer Sagittis</p>
<div class=read>
<p>Read more</p>
</div>
</div>
There's also a solution is to make the .read position: absolute. But in that way you need to make some room at the bottom of the .card from .read not obscuring the content, which is less flexible.
.card h2 {
padding-top: 1em;
}
.card img {
width: 100%;
height: 25em;
}
.card {
width: 50%;
float: left;
background: #e5e5e5;
padding: 2em;
margin: 1em;
box-sizing: border-box;
cursor: pointer;
transition: all 300ms ease;
overflow: hidden;
position: relative;
}
.read {
color: white;
background: blue;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
transform: translateY(100%);
transition: transform .2s;
}
.card:hover .read{
transform: translateY(0);
}
<div class="card">
<img src="https://prodimage.images-bn.com/pimages/9781338659511_p0_v1_s550x406.jpg">
<h2>Integer Sagittis</h2>
<p>Integer Sagittis</p>
<div class=read>
<p>Read more</p>
</div>
</div>

Answer 2

You cannot animate height and width, but you can animate height using transform: translateY.
The key to what I believe you desire is to create a three-Div structure: one outer div (.card), and two inner divs (.olayDiv and .imgDiv).
The outer div (.card) must be styled position:relative, and the inner divs must be position:absolute -- this causes the inner divs to sit on top of each other. You then use z-index to place .olayDiv on top of .imgDiv. (Note that you must make the outer div position:relative or the position:absolute will not work on the inner divs)
.card{
position:relative;
width: 350px;
height: 300px;
overflow: hidden;
border:1px solid #ccc;
}
.bothInnerDivs{
position: absolute;
left:0;
width:100%;
height:100%;
}
.imgDiv{
z-index: 0;
width:100%;
top:0;
}
.olayDiv{
z-index: 1;
top:0;
transform: translateY(88%);
transition: transform .5s ease-out;
color:white;
background:rgba(0,0,0,0.85);
}
.olayDiv:hover{
transform: translateY(0);
}
.blurb{
padding: 10px;
height:50%;
}
.imgDiv h2 {
padding-top: 1em;
}
.imgDiv img {
width: 275px;
height: 25em;
}
.imgDiv {
padding: 2em;
margin: 1em;
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
}
.read {
color: white;
background: blue;
height: 40px;
}
.centerHeightAndWidth{
display: flex;
align-items:center;
justify-content:center;
}
p{padding:0;margin:0;}
<div class="card">
<div class="imgDiv bothInnerDivs">
<img src="https://prodimage.images-bn.com/pimages/9781338659511_p0_v1_s550x406.jpg">
<h2>Integer Sagittis</h2>
<p>Integer Sagittis</p>
</div>
<div class="olayDiv bothInnerDivs">
<div class="read centerHeightAndWidth"><p>Read more</p></div>
<div class="blurb">
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, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="blurb">
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. </div>
</div>
</div>