html - Bootstrap 3 - Section - How to Center Images -
would love know how make images centered not floating left. tried modifying float attributes things go messy. please! i'm using section tags no grid thingy whatsoever.
when set float "none" happens
#hover { color: rgba(188, 175, 204, 0.9); } h2#testimonials { color: #e72635; } div#all { width: 100%; height: 100%; } /* generic css */ .view { margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; font-family: "josefin slab","helvetica neue",helvetica,arial,sans-serif; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 } .view p { font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 0px 20px 0px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; font-family: montserrat,"helvetica neue",helvetica,arial,sans-serif; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 } /*2*/ .view-second img { transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; } .view-second .mask { background-color: rgba(12, 19, 27, 0.6); width: 400px; padding: 105px; height: 450px; opacity: 0; transition: 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; } .view-second h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); font-family: "josefin slab","helvetica neue",helvetica,arial,sans-serif; background: transparent; margin: 20px 40px 0px 40px; opacity: 0; color: #8f1925; transform: scale(0); transition: 0.5s linear 0s; } .view-second p { transform: scale(0); transition: 0.5s linear 0s; } .view-second a.info { opacity: 0; transform: scale(0); transition: 0.5s linear; } /* */ .view-second:hover .mask { opacity:1; transform: translate(-80px, -125px) rotate(45deg); -webkit-transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h2, .view-second:hover p, .view-second:hover a.info{ transform: scale(1); opacity: 3; } img#articlepic { height: 200px; width: 300px; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>the university digest</title> <link rel="shortcut icon" href="img/logo1.png" /> <!-- bootstrap core css --> <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- custom css --> <link href="css/template.css" rel="stylesheet"> <link href="css/indexobjects.css" rel="stylesheet"> <!-- fonts --> <link href="http://fonts.googleapis.com/css?family=open+sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=josefin+slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=montserrat:400,700" rel="stylesheet" type="text/css"> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- header container --> <div class="container-full" id="headerc"> <header class="masthead"> <p id="headerp">the university digest</p> <p id="subheader">the official student publication of western mindanao state university</p> </header> </div> <!-- navigation --> <div id="nav"> <!-- content layout --> <!-- portfolio grid section --> <section id="portfolio" class="bg-light-gray"> <div class="container"> <div class="rows"> <div class="col-lg-12"> <h2 class="section-heading">articles</h2> </div> <div id="all"> <div class="view view-second"> <img src="http://goo.gl/n6eiy5" class="img-responsive img-full" alt="" id="articlepic" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://goo.gl/ikgtbn" class="img-responsive" alt="" id="articlepic" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" id="articlepic" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" id="articlepic"/> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" id="articlepic"/> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> <div class="view view-second"> <img src="http://jacobstone.co.uk/livetesting/guy.jpg" class="img-responsive" alt="" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">testimonials</h2> <p>“a description of sort between these tags. cool ye , awesomely awesome. cool.”</p> <a href="#" class="info">read more</a> </div> </div> </div> </div> </div> </section> </body> </html>
just make changes in css , can desired result through mentioned below css
css
div#all { border: 1px solid; display: block; height: 100%; overflow: hidden; text-align: center; width: 100%; } .view { background: url("../images/bgimg.jpg") no-repeat scroll center center #ffffff; border: 10px solid #ffffff; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; display: inline-block; margin: 10px; overflow: hidden; position: relative; text-align: center; } 
Comments
Post a Comment