Fading a div overflow into adjacent div - html

Question

I am trying to create a card UI at: https://codepen.io/sarimabbas/pen/qjZYvr
.book_left {
width: 35%;
height: 300px;
float: left;
overflow-x: hidden;
background: transparent;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
position: relative;
}
.book_right {
width: 65%;
height: 300px;
float: left;
background: #000000;
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
The problem I run into is that the left side of the card (which contains an image), can overflow onto the right. Instead of hiding this overflow, I would like to blend it into the div on the right, so that the text is not hidden and can be readable.
Would something like this be possible? I have tried to research combinations of floats, background image fades and divs but have been unsuccessful.
On a related note, what would be the steps needed to make such a card responsive?

Answer 1

I'm not sure I understand completely, but using the below code gives transparency allowing to see the text on top of the overflowed image. With a completely black background that's not an option.
.book_right {
width: 65%;
height: 300px;
float: left;
background: rgba(0,0,0, 0.5);
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
position: relative;
}
With regard to responsiveness, I would go for a flexbox instead of floats and use percentages instead of pixels for width and height.
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
width: 450px;
height: 300px;
background: transparent;
position: static;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 2px 1px 0 #777;
}
.book_left {
width: 35%;
height: 300px;
float: left;
overflow-x: visible;
background: transparent;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
position: relative;
}
.book_right {
width: 65%;
height: 300px;
float: left;
background: rgba(0,0,0, 0.5);
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
position: relative;
}
.book_right h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: left;
font-size: 20px;
margin: 30px 0 0 0;
padding: 0 0 0 40px;
letter-spacing: 1px;
}
.book_right_details ul {
list-style-type: none;
padding: 0 0 0 40px;
margin: 10px 0 0 0;
}
.book_right_details ul li {
display: inline;
color: #e3e3e3;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
padding: 0 40px 0 0;
}
.book_right_blurb p {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 0 40px 0 40px;
letter-spacing: 1px;
margin: 10px 0 10px 0;
line-height: 20px;
}
.book_right_blurb a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding: 0 0 0 40px;
color: #2ecc71;
margin: 0;
}
.book_right_button {
padding: 0 0 0 40px;
margin: 15px 0 0 0;
}
.book_right_button a {
color: #2ecc71;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
border: 2px solid #2ecc71;
padding: 5px 5px 5px 5px;
font-size: 12px;
border-radius: 5px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.book_right_button a:hover {
color: #000000;
background-color: #2ecc71;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
<div class='book'>
<div class='book_left'>
<img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
</div>
<div class='book_right'>
<h1>Harry Potter and the Deathly Hallows</h1>
<div class='book_right_details'>
<ul>
<li>JK Rowling</li>
<li>Fiction</li>
</ul>
<div class='book_right_blurb'>
<p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
</div>
<div class='book_right_button'>
<a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
</div>
</div>
</div>
</div>

Answer 2

There's a few approaches to this problem but the simplest I can think of is something like applying a gradient background to the right hand box and setting .book's background to be black. So something like the following (will need some polishing of course)
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
width: 450px;
height: 300px;
margin: auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 2px 1px 0 #777;
background: #000;
}
.book_left {
width: 35%;
height: 300px;
float: left;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
/* No need for relative or z-indexes if our layers are in order (later in markup = "higher" layer for position: static) */
}
.book_right {
width: 65%;
height: 300px;
float: left;
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
/* Gradient that sits on left of right panel - black background has also been applied to .book so that if the image doesn't fit the width we won't end up with weird chunks of missing background */
/* Generated gradient via: http://colorzilla.com/gradient-editor/ then tweaked a little */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.book_right h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: left;
font-size: 20px;
margin: 30px 0 0 0;
padding: 0 0 0 40px;
letter-spacing: 1px;
}
.book_right_details ul {
list-style-type: none;
padding: 0 0 0 40px;
margin: 10px 0 0 0;
}
.book_right_details ul li {
display: inline;
color: #e3e3e3;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
padding: 0 40px 0 0;
}
.book_right_blurb p {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 0 40px 0 40px;
letter-spacing: 1px;
margin: 10px 0 10px 0;
line-height: 20px;
}
.book_right_blurb a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding: 0 0 0 40px;
color: #2ecc71;
margin: 0;
}
.book_right_button {
padding: 0 0 0 40px;
margin: 15px 0 0 0;
}
.book_right_button a {
color: #2ecc71;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
border: 2px solid #2ecc71;
padding: 5px 5px 5px 5px;
font-size: 12px;
border-radius: 5px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.book_right_button a:hover {
color: #000000;
background-color: #2ecc71;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
<div class='book'>
<div class='book_left'>
<img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
</div>
<div class='book_right'>
<h1>Harry Potter and the Deathly Hallows</h1>
<div class='book_right_details'>
<ul>
<li>JK Rowling</li>
<li>Fiction</li>
</ul>
<div class='book_right_blurb'>
<p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
</div>
<div class='book_right_button'>
<a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
</div>
</div>
</div>
</div>
Making it responsive you could set a % width on .book and probably float it.
The caveat to my approach is that if the image doesn't overflow it will have a hard edge so it may look strange next to ones that don't do overflow. You could attack this by also setting a percentage width on the images but you'd need to be cautious of images with largely different proportions and ensure that they always cover the 300px height. Alternatively you could set the images as a background image on .book_left and set background-size: cover
I'd usually suggest in this instance to crop images to consistent proportions to avoid the need for fading the overflow as it'll make your life a lot easier in the long run.
An alternate approach to the fade that might be more consistent would be to relatively position .book_left then place an absolutely positioned div within it with a gradient background which is layered on top of the image so something like a div with the following properties added within .book_left
position: absolute;
right: 0;
z-index: 1;
width: 10px;
background: -moz-linear-gradient .....
This combined with an image that fills the container should give you a more consistent look if you want the fade there