Image Tiles

by Roshan Karunarathna

HTML

<div class="maintext">

                <div class="leftimg">
                    <a href="Homepage.php">
                    <div class="wrapper">
                    <img src="http://www.greekguysgrill.com/images/Dollarphotoclub_51414227.jpg" width="400" height="auto">
                    <div class="name">
                    <span>Big American Burger</span>
                    </div>
                    </div>
                    </a>
                </div>
                <div class="leftimg">
                    <a href="Homepage.php">
                     <div class="wrapper">
                    <img src="http://www.greekguysgrill.com/images/Dollarphotoclub_51414227.jpg" width="400" height="auto">
                    <div class="name">
                    <span>Big American Burger</span>
                    </div>
                    </div>
                    </a>
                </div>
                <div class="leftimg">
                    <a href="Homepage.php">
                     <div class="wrapper">
                    <img src="http://www.greekguysgrill.com/images/Dollarphotoclub_51414227.jpg" width="400" height="auto">
                    <div class="name">
                    <span>Big American Burger</span>
                    </div>
                    </div>
                    </a>
                </div>
                <div class="leftimg">
                    <a href="Homepage.php">
                     <div class="wrapper">
                    <img src="http://www.greekguysgrill.com/images/Dollarphotoclub_51414227.jpg" width="400" height="auto">
                    <div class="name">
                    <span>Big American Burger</span>
                    </div>
                    </div>
                    </a>
                </div>
    </div>

CSS

div.maintext{
    position:relative;
    text-align:center;
    margin:auto;
    width:90%;
    font-weight:normal;
    font:;
    background-color:#ffffff;
    padding:25px;
    margin-top:30px;
    border-radius:5px;
    overflow:hidden;
}

.leftimg {
    border: 2px #ddd solid;
    position:relative; 
    width:400px;
    height: auto;
    /*margin-top:50px;*/
    margin-bottom:30px;
    float:left;
    /*margin-left: 10%;*/
`}
.name{ 
    width: 100%; 
    color: white; 
    font: bold 35px/45px freestyle script, Sans-Serif; 
    text-align: center;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);

}   


img{
    /*border: 3px solid #5F5F5F;*/
    border-radius:3px;
    width:100%;
    transition: .15s ease-out;

}


img:hover {
    opacity: 0.6;
    transition: opacity .15s ease-in-out;

}
.wrapper{
  padding:5px;
}