mpeterson mpeterson - 3 months ago 16
CSS Question

Is there a way to re-create this grid slider with CSS?

I came across this image of a testimonial grid slider and I would really like something like that on my website.

http://d5vf6134d8ffdnfp1qv4rv3l.wpengine.netdna-cdn.com/wp-content/uploads/studiopress.jpg

I've been looking all morning for a good way to emulate this with html and css. I'm trying to avoid using javascript since implementing it on my wordpress site is way too complicated and it usually breaks my site everytime I try.
I found this tabbed gallery:

http://www.cssscript.com/simple-tab-gallery-with-pure-css-css3/

would there be an easy way to get it to look more like the example above? I can't seem to really get it to move around and look the way I want it to.

Answer

I made a layout for you to demonstrate how you could do it ^^

.wrapper {
	width: 500px;
	height: 200px;
	position: relative;
}
input {
	display: none;
}
.images {
	width: 300px;
	height: 160px;
	position: absolute;
	top: 0;
	right: 0;
}
label {
	display:block;
	width: 50%;
	height: 100%;
	background: lightblue;
	float: left;
}
label:hover {
	background: darkblue;
}
.left1, .left2 {
	width: 200px;
	background: blue;
	display: none;
	position: absolute;
	top: 0;
	left: -200px;
	bottom: -40px;
}
.bottom1, .bottom2 {
	width: 300px;
	height: 40px;
	position: absolute;
	bottom: -40px;
	right: 0;
	display: none;
	background: orange;
}
#img1:checked + .img1,
#img2:checked + .img2 {
	background: darkblue;
}
#img1:checked + .img1 + .left1,
#img2:checked + .img2 + .left2,
#img1:checked + .img1 + .left1 + .bottom1,
#img2:checked + .img2 + .left2 + .bottom2{
	display: block;
}
<div class="wrapper">  
	<div class="images">
		<input id="img1" type="radio" checked name="img" />
		<label class="img1" for="img1"></label>
		<div class="left1">lalalallalala  la l ala la la </div>
		<div class="bottom1">a lal  all ala</div>
		
		<input id="img2" type="radio" name="img" />
		<label class="img2" for="img2"></label>
		<div class="left2">gb bgbg  gb g b gb gb  </div>
		<div class="bottom2">gb gb g b gb g b gb</div>
	</div>
</div>