Text appearing on an image when hover, javascript - javascript

I am creating a website for a coding course I am doing at my Uni and one of the requirements is to use JavaScript. I have added it in so that when you hover over the images on the website, the text will appear on the image. However, I want to make the text white and I want it to be centered, I have tried everything but the text won't budge from the top left-hand corner of each image. Any tips?
$('.image-container').on('mouseenter', function(){
$(this).children('div').show();
});
$('.image-container').on(
'mouseleave',
function(){
$(this).children('div').hide();
}
);
div#image-wrap {
background-color: white;
padding: 0;
margin: auto;
text-align: center;
}
div.image-column {
width: 31.5%;
background-color: white;
display: inline-block;
margin: 0px;
}
.image-container img {
width: 100%;
transition: .5s ease;
}
.image-container:hover img {
opacity: .6;
transition: .5s ease;
}
#img-name {
position: absolute;
display: none;
transition: .5s ease;
}
#img-name:hover {
opacity: 1;
transition: .5s ease;
}
p {
margin: 0px;
font-size: 20px;
text-align: justify;
font-size: 1.5vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-wrap">
<div class="image-column" id="col-1">
<div class="image-container">
<div id="img-name">
<p>Pier To Pier, Brighton Pier</p>
</div>
<img src="images/piertopier.jpg.JPG">
</div>
<div class="image-container">
<div id="img-name">
<p>Looking Back, Brighton Beach</p>
</div>
<img src="images/lookingback.jpg.JPG">
</div>
<div class="image-container">
<div id="img-name">
<p>Heart Shaped Flocks, Brighton Pier</p>
</div>
<img src="images/heartshapedflocks.jpg.JPG">
</div>
</div>
</div>


to make the text in the center you need the text's container to stretch and have the same width as the image, you can do that by making the position of the parent relative and the text's container absolute with left:0 and right:0, and to center the text use text-align:center and to make it white, wel .. color:#fff,
to center it vertically, use display:flex on the container and self-align:center on the text
( i added background red just to show the text, remove it when you put your images in place )
div#image-wrap {
background-color: white;
padding: 0;
margin: auto;
text-align: center;
}
div.image-column {
width: 31.5%;
background-color: white;
display: inline-block;
margin: 0px;
}
.image-container{
position: relative;
display: flex;
margin-top: 10px;
text-align:center;
}
.image-container img {
width: 100%;
transition: .5s ease;
}
.image-container:hover img {
opacity: .6;
transition: .5s ease;
}
#img-name {
position: absolute;
left: 0; /* stretch the text container */
right: 0; /* stretch the text container */
transition: .5s ease;
display: flex;
align-self: center;
text-align: center;
}
#img-name:hover {
opacity: 1;
transition: .5s ease;
}
p {
margin: 0px;
font-size: 20px;
text-align: center; /* to make the text in the center */
color: #fff; /* to make the text white */
font-size: 1.5vw;
width: 100%;
text-shadow: 0 0 2px #000;
z-index: 999;
}
<div id="image-wrap">
<div class="image-column" id="col-1">
<div class="image-container">
<div id="img-name">
<p>Pier To Pier, Brighton Pier</p>
</div>
<img src="https://loremflickr.com/100/100/dog">
</div>
<div class="image-container">
<div id="img-name">
<p>Looking Back, Brighton Beach</p>
</div>
<img src="https://loremflickr.com/100/100/cat">
</div>
<div class="image-container">
<div id="img-name">
<p>Heart Shaped Flocks, Brighton Pier</p>
</div>
<img src="https://loremflickr.com/100/100/flower">
</div>
</div>
</div>


p {
margin: 0px;
font-size: 20px;
text-align: center !important;
font-size: 1.5vw;
color: white !important;
}


Set position relative to image-container class. Add top:50%, left:0, right:0 for #img-name. And the last one remove text-align: justify from p.
You can easily add color white but if you add color to white it will not visible.
$('.image-container').on('mouseenter', function(){
$(this).children('div').show();
});
$('.image-container').on(
'mouseleave',
function(){
$(this).children('div').hide();
}
);
div#image-wrap {
background-color: white;
padding: 0;
margin: auto;
text-align: center;
}
div.image-column {
width: 31.5%;
background-color: white;
display: inline-block;
margin: 0px;
}
.image-container{
position:relative;
}
.image-container img {
width: 100%;
transition: .5s ease;
}
.image-container:hover img {
opacity: .6;
transition: .5s ease;
}
#img-name {
position: absolute;
display: none;
transition: .5s ease;
top:50%;
left:0;
right:0
}
#img-name:hover {
opacity: 1;
transition: .5s ease;
}
p {
margin: 0px;
font-size: 20px;
font-size: 1.5vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-wrap">
<div class="image-column" id="col-1">
<div class="image-container">
<div id="img-name">
<p>Pier To Pier, Brighton Pier</p>
</div>
<img src="https://i.stack.imgur.com/m2GGn.jpg">
</div>
<div class="image-container">
<div id="img-name">
<p>Looking Back, Brighton Beach</p>
</div>
<img src="images/lookingback.jpg.JPG">
</div>
<div class="image-container">
<div id="img-name">
<p>Heart Shaped Flocks, Brighton Pier</p>
</div>
<img src="https://i.stack.imgur.com/m2GGn.jpg">
</div>
</div>
</div>

Related

How can I have my search check for objects on other pages but display on the current page

Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>

Overlap issue in html card

In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker

Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.

Blank space in the bottom of HTML page

I have one very difficult problem for me when finishing my HTML project. The problem is there's a blank space at the bottom of my HTML page. I've tried every way to remove it but then when I try it, the other element will be messy. How to remove the blank space while keeping the other element?
Here's my code:
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
img {
max-width: 100%;
height: auto;
}
ul, ol {
list-style: none;
}
h1, h2, h3 {
font-family: roboto light;
}
p {
font-family: open sans;
}
::-webkit-scrollbar {
width: 17px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(0,0,0.1);
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #3498db;
transition: all .4 linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #2980b9;
}
.container4 {
width: 100%;
height: 600px;
padding-bottom: -1000px;
}
.header4 {
text-align: center;
padding-top: 80px;
color: #424242;
}
/* Flipper */
/* entire container, keeps perspective */
.flip-container {
position: relative;
top: 20px;
left: 50px;
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/* End Flipper */
.tim1 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
margin-left: 25px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim1:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim2 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -489px;
left: 355px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim2:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim3 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -978px;
left: 685px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim3:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim4 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -1468px;
left: 1015px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim4:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
#-webkit-keyframes efekgambar {
0% {
-webkit-filter: contrast(400%) grayscale(0%);
}
100% {
-webkit-filter: contrast(100%) grayscale(100%);
}
}
#-webkit-keyframes terang {
0% {
-webkit-filter: brightness(100%);
}
100% {
-webkit-filter: brightness(125%);
}
}
.orang1, .orang2, .orang3, .orang4 {
animation-name: terang;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
}
.orang1back, .orang2back, .orang3back, .orang4back {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
animation-name: efekgambar;
animation-direction: alternate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.orang1:hover, .orang1back:hover, .orang2:hover, .orang2back:hover,
.orang3:hover, .orang3back:hover, .orang4:hover, .orang4back:hover {
border: 4px solid #EEEEEE;
}
.sosial-media ul {
display: flex;
float: left;
position: relative;
top: 30px;
left: 70px;
}
.sosial-media ul li {
list-style: none;
}
.sosial-media ul li a {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 0 2px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 4px solid #FAFAFA;
z-index: 1;
}
.fb {
background: #507cd3;
}
.tw {
background: #7fc9ff;
}
.gp {
background: #ff6251;
}
.ig {
background: #ff5b79;
}
.sosial-media ul li a .fa {
position: relative;
color: #FAFAFA;
transition: .5s;
z-index: 3;
}
.sosial-media ul li a:hover .fa {
transform: rotateY(360deg);
}
.sosial-media ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
.sosial-media ul li a:hover:before {
top: 0;
}
.sosial-media ul li:nth-child(1) a:before {
background: #3b5999;
}
.sosial-media ul li:nth-child(2) a:before {
background: #55acee;
}
.sosial-media ul li:nth-child(3) a:before {
background: #dd4b39;
}
.sosial-media ul li:nth-child(4) a:before {
background: #e4405f;
}
/* End Container4 */
/* Container5 */
.container5 {
width: 100%;
height: 450px;
position: relative;
top: -1400px;
margin-top: 30px;
background-image: url('1.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header5 {
color: #000;
position: absolute;
top: 30px;
left: 100px;
text-align: center;
padding-top: 40px;
}
.progress {
position: absolute;
top: 125px;
left: 800px;
width: 450px;
height: 100%;
color: #FAFAFA;
}
.bar {
height: 20px;
background: #FAFAFA;
color: #FAFAFA;
text-align: right;
width: 100%;
margin-bottom: 20px;
font-size: 10pt;
font-weight: bold;
}
.level {
height: 20px;
width: 80%;
}
#-webkit-keyframes eighty {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.eighty.start {
width: 0px;
background: #2EA2DB;
animation: eighty 2s ease-out forwards;
-webkit-animation: eighty 2s ease-out forwards;
}
#-webkit-keyframes eightyfive {
0% {
width: 0px;
}
100% {
width: 85%;
}
}
.eightyfive.start {
width: 0px;
background: #2EA2DB;
animation: eightyfive 2s ease-out forwards;
-webkit-animation: eightyfive 2s ease-out forwards;
}
#-webkit-keyframes seventy {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.seventy.start {
width: 0px;
background: #2EA2DB;
animation: seventy 2s ease-out forwards;
-webkit-animation: seventy 2s ease-out forwards;
}
#-webkit-keyframes ninety {
0% {
width: 0px;
}
100% {
width: 90%;
}
}
.ninety.start {
width: 0px;
background: #2EA2DB;
animation: ninety 2s ease-out forwards;
-webkit-animation: ninety 2s ease-out forwards;
}
/* End Container5 */
.container6 {
width: 100%;
height: 800px;
background-color: maroon;
}
<!-- Container4 -->
<div class="container4">
<a id="tim"></a>
<div class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header4">Tim</h1>
<hr width="80px" color="#F16051" style="position: absolute; left: 635px;">
<p align="center" style="margin-top: 10px; margin-bottom: 10px;"><font color="#212121">Dibawah ini adalah para ahli yang siap melayani Anda.</font></p>
</div>
<div class="tim1 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Anas</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">CEO & Founder</font></i></p>
<hr width="110px" height="2px" color="#424242" style="position: relative; top: 10px; left: 95px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penemu sekaligus <i>Leader</i> Jasa Pembuatan Blog Anas. Salah satu Blogger Indonesia dan sangat gemar menulis artikel.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim2 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang2" src="orang1.jpg">
</div>
<div class="back">
<img class="orang2back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Vickri Style</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Desainer</font></i></p>
<hr width="70px" height="2px" color="#424242" style="position: relative; top: 10px; left: 113px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Seorang desainer amatir yang mempunyai kemampuan hebat. Gemar mendekatkan diri dengan alam.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim3 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Adhitya Mahendra</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Penulis</font></i></p>
<hr width="60px" height="2px" color="#424242" style="position: relative; top: 10px; left: 118px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penulis artikel untuk Jasa Pembuatan Blog Anas. Paling tahu dan paling update seputar dunia teknologi.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="tim4 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Andhika Ramadhan</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Social Marketing</font></i></p>
<hr width="120px" height="2px" color="#424242" style="position: relative; top: 10px; left: 90px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Ahli dalam berbicara dan orang yang mempromosikan Jasa Pembuatan Blog Anas. Sangat gemar bermain game.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google-plus"><i class="fa fa-google-plus"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<!-- End Container4 -->
<!-- Container5 -->
<div class="container5">
<div class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header5">Skill Kami</h1>
<hr width="140px" color="#2EA2DB" style="position: relative; top: 110px; left: 100px;">
<p style="color: #FAFAFA; position: absolute; top: 130px; left: 100px; margin-right: 700px;">
Tim Jasa Pembuatan Blog Anas terdiri dari 4 ahli professional yang sudah sangat berpengalaman dalam bidang mereka masing-masing. Ketika 4 professional tersebut bersatu maka akan tercipta sebuah pernyataan yang bisa menyimpulkan skill yang dimiliki oleh Jasa Pembuatan Blog Anas. Dan disebelah kanan adalah skill yang kami miliki hingga saat ini dan akan terus berkembang.
</p>
<p style="color: #FAFAFA; position: absolute; top: 280px; left: 100px; margin-right: 700px;">
Dengan skill yang sudah lebih dari standar, dapat dijamin bahwa layanan yang tim Jasa Pembuatan Blog Anas akan memenuhi segala keinginan Anda.
</p>
</div>
<div class="progress wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<p>UX dan UI</p>
<div class="bar">
<div class="level eighty">
<p style="padding-right: 20px;">80%</p>
</div>
</div>
<p>Web Desain</p>
<div class="bar">
<div class="level eightyfive">
<p style="padding-right: 20px;">85%</p>
</div>
</div>
<p>Web Programming</p>
<div class="bar">
<div class="level seventy">
<p style="padding-right: 20px;">70%</p>
</div>
</div>
<p>Search Engine Optimization</p>
<div class="bar">
<div class="level ninety">
<p style="padding-right: 20px;">90%</p>
</div>
</div>
</div>
</div>
<!-- End Container5 -->

Change your starting tag with this
<body style="margin-buttom:-50;">
change -50 according to your need.

You have no margin in the html, body tag. Try to change css line with '*' to html, body and make it padding ang margin 0.
html, body { margin: 0; padding: 0; }

navbar top fixed shrink with a carousel without overlap

I want to get this effect: www.kemtecnia.com
This website has a navbar fixed top which shrinks on scroll down, has below a carousel fixed which seems to disappear by the content below.
How can I do in my code to get it?
I have the navbar top:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Desplegar menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.php">
<img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$i = 0;
foreach($menuItems as $menuItem => $url){
if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
echo "<li class='active'>\n";
else
echo "<li>\n";
echo $url . $menuItem . "</a>\n";
echo "</li>\n";
$i++;
}
?>
</ul>
</div>
</div>
but seems to overlap my carousel. The navbar shrinks too by js. I want to get that doesn't overlap my carousel and carousel dissapear with the rest of the content when scroll.
CSS of the navbar:
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
Thanks so much in advance!
Edit:
Codepen here: http://codepen.io/jesfer/pen/oLvQYY

don't know if this helps... but might be what you are looking for or atleast push you in the right direction.
http://codepen.io/MatthewBryce/pen/qZBPpp
HTML
<div class="headerWrap">
<div class="headerWrapContent">
Title
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div><div class="wrap">
<div class="headerWrap">
<div class="headerWrapContent">
Stupidly simple stick-on-scroll Menu
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
CSS
body {
color: #444;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
margin: 0px;
background: #222;
}
.headerMast {
background: #AAA;
min-height: 200px;
max-height: 200px;
margin-top: 0px;
text-align: center;
padding-top: 110px;
color: #FFF;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.headerMastAnim {
margin-top: -300px;
margin-bottom: 300px;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.wrap {
background: #444;
overflow: auto;
}
.headerWrap {
background: #222;
font-size: 30px;
height: 100px;
line-height: 100px;
font-weight: lighter;
color: #CCC;
}
.headerWrapContent {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.menuWrap {
background: RGBA(0,0,0,0.7);
color: #fff;
height: 55px;
line-height: 60px;
letter-spacing: 1px;
width: 100%;
margin-bottom: -55px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
z-index: 100;
position: absolute;
}
.menuWrap.sticky {
position: fixed;
top: 0px;
height: 30px;
line-height: 30px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
}
.menuNavigationFloat {
background: RGBA(0,0,0,0.5);
padding: 0px 20px;
width: 80%;
height: inherit;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
}
.menuNavigationFloat a{
list-style: none;
color: #FFF;
font-size: 16px;
width: 170px;
height: auto;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 2px;
display: inline-block;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: background 0.4s, width 0.3s;
}
.menuNavigationFloat a:hover{
text-decoration: none;
width: 200px;
transition: background 0.4, width 0.3s;
}
.menuNavigationFloat a:nth-child(1) { background: #CC2222; }
.menuNavigationFloat a:nth-child(1):hover { background: #FF3333; }
.contentWrap {
background: #EEE;
width: 80%;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 80px;
min-height: 1000px;
}
JS
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.menuWrap').addClass("sticky");
$('.headerMast').addClass("headerMastAnim");
}
else{
$('.menuWrap').removeClass("sticky");
$('.headerMast').removeClass("headerMastAnim");
}
});
http://codepen.io/MatthewBryce/pen/qZBPpp

to make a div inside a div always in middle of the page

I am making a responsive gallery page but got stuck. All i want is to make my .gallery-container in middle in any width. There's a gap in right side which is not equal to left side. Is there any way to maintain the gap between left and right side equal so that the gallery div will be always in middle of the page in any width?
If there is, it will help me alot
heres my code
It's complicated because i have given width to image and without giving width i cant display bigger image while going to a link a. So, all i need is to make the half of the space of right side to left side also. I now figure out that's the work of js. If you can then do help me.
.sj-main-content-inner {
max-width: 100%;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
margin: 0;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
float: left;
position: relative;
margin-right: 25px;
width: 360px;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="sj-main-container">
<div class="sj-main-content">
<div class="sj-main-content-inner">
<h1>Foto Gallery</h1>
<ul class="gallery-container">
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="http://upper.dev/swiss-japon/suissejapon110216/?gallery=fotos">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
<li class="gallery-list col-lg-3 col-md-3 col-sm-6 col-xs-12">
<br>
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive">
<div class="gallery-title">
<h3 class="sj-event-title">About this album for visitor</h3>
<a class="sj-read-more" title="Your caption here" href="<?php the_permalink();?>">View More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>

Use this code:
.sj-main-content-inner {
width: 100%;
margin: auto;
display: block;
overflow: hidden;
min-height: 300px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
.gallery-container {
max-width: 800px;
height:100%;
background: #000;
margin:auto;
}
ul {
list-style: square outside;
/* margin: 0 0 20px 20px; */
}
.gallery-list {
list-style: none;
position: relative;
width: 360px;
margin:auto;
border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
background: rgba(255,255,255,1);
}
.gallery-title {
position: absolute;
left: 50%;
bottom: 30px;
width: 302px;
margin-left: -151px;
text-align: center;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
border: 1px solid #fff;
padding: 20px 10px;
}
.gallery-title h3 {
font-size: 18px;
text-transform: none;
margin-bottom:20px;
}
.sj-read-more {
color: #000;
text-decoration: none;
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.sj-read-more:after {
content: '';
width: 60px;
height: 1px;
background: #a4a4a5;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 0;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
color: #e45f4d;
text-decoration: none;
}
.sj-read-more:hover:after {
width: 100%;
left: 0;
margin-left: 0;
bottom: 15px;
color: #e45f4d;
transition: all ease-out 0.3s;
-moz-transition: all ease-out 0.3s;
-webkit-transition: all ease-out 0.3s;
}
Now for making it responsive play with the values in his code and add it just where your CSS ends. For reference use this link
#media only screen and (max-width: 700px) {
.gallery-container{
width:500px;
margin:auto;
}
}
Whenever you have to position a body to the centre use this as a trick:
<selector>{
width:<x>px;
margin:auto;
}
You can specify the top and bottom margin using margin-top and margin-bottom below margin:auto; but once you use this you can not set margin-left or margin-right.(But then you won't be requiring margin let/right because you are positioning the div in centre).

Problem solved by using jquery
$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( {
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});

Categories

Resources