css - I want to merge two cells together in the proposed html layout -
i'm using this layout , can see there section 8 pictures on bottom of page - each of them hyperlink bigger image. works pretty neat, esp. when resize page smaller size, 4 cells becomes 2 , looks like this. want change little, 2 first pictures merged together, layout like this, , when user resizes it, show him proper layout like this. far html code specific part of page looks this:
<section class="screenshots" id="screenshots"> <div class="container-fluid"> <div class="row"> <ul class="grid"> <li> <figure> <img src="img/02-screenshot.jpg" alt="screenshot 01"> <figcaption> <div class="caption-content"> <a href="img/large/02.jpg" class="single_image"> <i class="fa fa-search"></i><br> <p>user centric design</p> </a> </div> </figcaption> </figure> </li> <li> <figure> <img src="img/03-screenshot.jpg" alt="screenshot 01"> <figcaption> <div class="caption-content"> <a href="img/large/03.jpg" class="single_image"> <i class="fa fa-search"></i><br> <p>responsive , adaptive</p> </a> </div> </figcaption> </figure> </li> <li> <figure> <img src="img/04-screenshot.jpg" alt="screenshot 01"> <figcaption> <div class="caption-content"> <a href="img/large/04.jpg" class="single_image"> <i class="fa fa-search"></i><br> <p>absolutely free</p> </a> </div> </figcaption> </figure> </li> </ul> </div> <div class="row"> <ul class="grid"> <li> <figure> <img src="img/06-screenshot.jpg" alt="screenshot 01"> <figcaption> <div class="caption-content"> <a href="img/large/06.jpg" class="single_image"> <i class="fa fa-search"></i><br> <p>exclusive codrops</p> </a> </div> </figcaption> </figure> </li> <li> <figure> <img src="img/07-screenshot.jpg" alt="screenshot 01"> <figcaption> <div class="caption-content"> <a href="img/large/07.jpg" class="single_image"> <i class="fa fa-search"></i><br> <p>made love</p> </a> </div> </figcaption> </figure> </li> <li> <figure> <img src="img/08-screenshot.jpg" alt="screenshot 01"> <figcaption> <div class="caption-content"> <a href="img/large/08.jpg" class="single_image"> <i class="fa fa-search"></i><br> <p>in sydney, australia</p> </a> </div> </figcaption> </figure> </li> </ul> </div> </div> </section> and css code looks this:
/* ========================================================================== screenshots intro ========================================================================== */ .screenshots-intro { padding: 170px 0 100px 0; background-color: #f6f7f9; } .screenshots-intro h1 { margin-bottom: 20px; color: #24374b; font-weight: 400; font-size: 22px; } .screenshots-intro p { margin-bottom: 25px; color: #778899; } /* ========================================================================== screenshots ========================================================================== */ .screenshots ul { margin: 0; padding: 0; width: 100%; } .screenshots ul li { float: left; min-height: 100%; width: 25%; background-color: #000; list-style: none; } .screenshots figure { position: relative; overflow: hidden; } .screenshots figure img { width: 100%; height: 100%; -webkit-transition: 300ms ease-in-out; transition: 300ms ease-in-out; } .screenshots figure:hover img, .screenshots figure:focus img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .screenshots figcaption { position: absolute; top: 0; left: 0; padding: 25% 0; width: 100%; height: 100%; background-color: rgba(63, 97, 132, 0.85); text-align: center; font-size: 15px; opacity: 0; -webkit-transition: 300ms ease-in-out; transition: 300ms ease-in-out; } .screenshots figcaption { color: #fff } .screenshots figcaption a:hover, .screenshots figcaption a:focus { color: #73d0da } .screenshots figure:hover figcaption, .screenshots figure:focus figcaption { opacity: 1 } .visible { opacity: 1 } .screenshots figure.cs-hover figcaption { opacity: 1 } .screenshots figcaption { font-size: 35px } .screenshots figcaption p { margin-bottom: 0; text-transform: uppercase; font-weight: 400; } .screenshots figcaption .caption-content { position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -100px; width: 200px; -webkit-transform: translate(0px, 15px); -ms-transform: translate(0px, 15px); transform: translate(0px, 15px); -webkit-transition: 300ms ease-in-out; transition: 300ms ease-in-out; } .screenshots figure:hover figcaption .caption-content, .screenshots figure:focus figcaption .caption-content { -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } i know it's lot of code, maybe of have idea of how change particular part of layout have included in pictures? thanks.
this updated answer.
i attaching code , jsfiddle link it.
just replace src of images yours see results.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <style type="text/css"> .container { width: 100%; margin: 0 auto; } img { max-width: 100%; } /* css understanding */ .a { background-color: red; } .b { background-color: green; } .c { background-color: blue; } .d { background-color: black; } /* css understanding */ /* logic change positions of image */ @media (min-width: 320px) { .a, .b, .c, .d { width: 100%; float: left; } } @media (min-width: 768px) { .a, .b, .c, .d { width: 50%; float: left; } } </style> <body> <div class="container"> <div class="a"> <img src="img/1.png" height="222" width="581"> </div> <div class="b"> <img src="img/2.jpg" height="222" width="581"> </div> <div class="c"> <img src="img/3.jpg" height="222" width="581"> </div> <div class="d"> <img src="img/4.png" height="222" width="581"> </div> </div> </body> </html>this jsfiddle link
Comments
Post a Comment