Modern Responsive Image gallery in HTML & CSS ✅

Logic Tycoon November 02, 2019



✅Step:1


  1. Create a html page and link bootstrap css if you have downloaded either you can use CDN Link : https://getbootstrap.com/docs/3.3/css/.
  2. Also link your custom css style sheet  
  3. Image that in use you will find : https://pixabay.com/

  <!DOCTYPE html>
  <html>
  <head>
      <title>Album</title>
      <link rel="stylesheet" type="text/css" href="bootstrap.css">
      <link rel="stylesheet" type="text/css" href="myStyle.css">
  </head>
  <body>

  <div class="album-sec">
  	<div class="container">
  		<div class="row">
  			<div class="col-md-12">
  				<div class="header text-center">
 				 <h2>our specialist</h2>
  					<p>meet our pretty stars</p>
  				</div>
  			</div>
  		</div>

  <div class="row">
 	 <div class="col-md-3">
  		<div class="single-album">
 		 <div class="album-img">
  			<img src="1.jpg" alt="img1">
  		 </div>
  
  	<div class="album-content">
  	  <div class="album-info">
  		<h3>Celina</h3>
  		<p>Skin Specialist</p>
  	</div>
  	  <p class="album-text">Lorem ipsum dolor sit consectetur adipisicing labore et dolore aliqua.</p>
  	</div>
  	</div>
  	</div>	

  <div class="col-md-3">
   <div class="single-album">
    <div class="album-img">
    <img src="2.jpg" alt="img1">
    </div>
    <div class="album-content">
    <div class="album-info">
    <h3>Celina</h3>
    <p>Skin Specialist</p>
    </div>
   <p class="album-text">Lorem ipsum dolor sit consectetur adipisicing labore et dolore 
   aliqua.</p>
   </div>
   </div>
  </div>	

  <div class="col-md-3">
  <div class="single-album">
  <div class="album-img">
  <img src="3.jpg" alt="img1">
  </div>
  <div class="album-content">
  <div class="album-info">
  <h3>Celina</h3>
  <p>Skin Specialist</p>
  </div>
  <p class="album-text">Lorem ipsum dolor sit consectetur adipisicing labore et dolore 
  aliqua.</p>
  </div>
  </div>
  </div>	

  <div class="col-md-3">
  <div class="single-album">
  <div class="album-img">
  <img src="4.jpg" alt="img1">
  </div>
  <div class="album-content">
  <div class="album-info">
  <h3>Celina</h3>
  <p>Skin Specialist</p>
  </div>
  <p class="album-text">Lorem ipsum dolor sit consectetur adipisicing labore et dolore magna.</p>
  </div>
  </div>
  </div>	

  </div>

  <div class="col-md-12 col-sm-12 text-center">

  <h2 style="font-family:'Galada',cursive;padding-top: 100px;font-size: 9rem;color: #2f2b2f;text-shadow: 5px 5px 10px #a78d8d;">Logic Tycoon</h2>
  </div>	

  </div>
  </div>


  </body>
  </html>

✅Step:2

  • Now in Step 2 we'll work on our Custom Css Style sheet follow this step by step

    @import url('https://fonts.googleapis.com/css?family=Galada');
    .header
    {
        margin: 3%;
    }
    .header h2,p
    {
        text-transform: uppercase;
        font-weight: bold;
    }
    .single-album
    {
        position: relative;
        overflow: hidden;
        box-shadow: 5px 5px 15px #000;
        border-radius: 150px 20px 30px 23px;
    }

    .album-img
    {
        position: relative;
        overflow: hidden;
    }
    .album-img img
    {
        width: 100%;
        transition: .4s;
    }

    .single-album:hover .album-img img
    {
        transform: scale(1.5,1.5);
    }

    .album-content
    {
        height: 80px;
        width: 100%;
        overflow: hidden;
        text-align: center;
        position: absolute;
        bottom: 0;
        transition: all .4s;
        background:#e430c5a8;

    }

    .single-album:hover .album-content
    {
        height: 150px;
        background:#000;
    }
    .album-info
    {
        transition:all .5s;
        padding: 5px 20px 5px 20px;
    }
    .album-info h3
    {
        font-size: 16px;
        color: #fff;
        margin: 5px;
        text-transform: uppercase;
    }
    .single-album:hover .album-info h3
    {
        color: tomato;
    }
    .album-info p
    {
        color: #fff;
        margin-top: 15px;
    }

    .album-text
    {
        color:#fff;
        padding: 0 10px 5px;
    }

❤️ Thanks for being with us 

☑️Follow us on Facebook : LogicTycoon ☑️Follow us on Twitter : LogicTycoon
☑️Follow us on Twitter : LogicTycoon
Tags:

Post a Comment

2 Comments