CODEWITHSUNDEEP
htmlcssthumbnails
ursalarose
ursalarose

Reputation: 47

Overflow broken on responsive thumbnails with h1 overlay

I'm trying to get my thumbnails to span 50% of their containing DIV, with the height being automatic, and a h1 header on top. Right now the h1 header is determining the height of the containing DIV, so the full thumbnail image is not viewable unless you scroll down (scrollbars are not desired). Any help is greatly appreciated. Thanks!

Here's my HTML:

<div id="content">
  <div class="featured">
    <a href="#"><img src="images/featured1.jpg" /></a>
    <h1><a href="#">Content for  class "featured" Goes Here</a></h1>
  </div>
  <div class="featured">
    <a href="#"><img src="images/featured2.jpg" /></a>
    <h1><a href="#">Content for  class "featured" Goes Here</a></h1>
  </div>
</div>

And my CSS:

#content {
    overflow: auto;
    position: relative;
}
.featured {
    float: left;
    width: 50%;
    height: auto;
    padding: 0;
    text-align: center;
    vertical-align:middle;
    position: relative;
    overflow: auto;
}
.featured img {
    width: 100%;
    height: auto;
}
.featured h1 {
    color: #CCC;
    font-size: 32px;
    letter-spacing: 0.1em;
    display:block;
    position:relative;
    z-index:3;
    text-align: center;
    vertical-align: middle;
}
.featured>a{
    position:absolute; top:0; left:0; z-index:0;
}
#content .featured:not(:hover) img {
    -webkit-filter: brightness(0.2);
    -moz-filter: brightness(0.2);
    -ms-filter: brightness(0.2);
    -o-filter: brightness(0.2);
    filter: brightness(0.2);
}
#content .featured:hover img {
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}

How my thumbnails look now: problem

And how I want my thumbnails to look: desired outcome

Upvotes: 0

Views: 61

Answers (1)

Velko Georgiev
Velko Georgiev

Reputation: 694

Something like that ? http://jsfiddle.net/L8ttn0nb/

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.wrapper {
	width: 100%;
	height: 100%;
	background-color: #AB700C;
}

.wrapper > .child {
	width: 50%;
	height: 97%;
	background-size: 100% 100%;
	float: left;
	display: table; 
}

.wrapper > .child > .content {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: table-cell; 
	vertical-align: middle;
	text-align: center;
	color: #fff;
}

.wrapper > .child > .content:hover {
	background-color: rgba(0, 0, 0, 0);
}

.wrapper > .child > .content a {
	color: #fff;
	text-decoration: none;
}

.wrapper > .child.left {
	background-image: url(images/featured1.jpg);
}

.wrapper > .child.right {
	background-image: url(images/featured2.jpg);
	
}
<div class="wrapper">
	<div class="child left">
		<div class="content">
			<h1>
				<a href="#">
					Content for  class "featured" Goes Here
				</a>
			</h1>
		</div>			
	</div>
	<div class="child right">
		<div class="content">
			<h1>
				<a href="#">
					Content for  class "featured" Goes Here
				</a>
			</h1>
		</div>
	</div>
</div>

Upvotes: 1

Related Questions