Develop Reference

Text appearing on an image when hover, 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>

Why does an overlay not work in IE?

I have an overlay. If the user clicks on a box the overlay slides up. My problem now is, that the overlay works without any issues in Mozilla Firefox and Chrome. But in Explorer the overlay goes all over the display. How can I solve this problem for IE? Is there something I didnt see? Or do I need a plugin for that?
This picture shows the normal version which I want to work in IE.
At the Moment it looks like this in IE.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.overlay').slideUp();
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
$('.overlay').on('click', function() {
$parent_box.find('.overlay').slideToggle(1000, 'swing');
});
.services-section {
background-color: #E6E6E6;
height: auto;
}
.services-section hr {
border-bottom: hidden;
width: 42px;
margin-left: 0px;
}
.services-section .services-detail {
border-radius: 4px;
transition: all 0.3s ease-in-out;
position: relative;
top: 0px;
padding: 60px 40px 60px 40px;
margin-top: 32px;
background-color:rgba(237, 238, 239, 0.8);
height: 500px;
}
.services-section .services-detail:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
top: -2px;
background-color:#FAFAFA;
color:#000;
}
.services-section .services-detail {
font-size: 60px;
color: #000;
margin-bottom: 10px;
}
.services-section .services-detail:hover .fa {
color: #fd2034;
}
.services-detail h5 {
color: #000;
font-size: 25px;
font-family: 'Poppins', sans-serif;
}
.services-detail:hover h5 {
color: #000;
}
.services-detail p {
color: #000;
font-size: 18px;
}
.services-detail:hover p {
color: #000;
}
.overlay{
display: none; /* Hidden by default*/
position: fixed; /* Stay in place*/
z-index: 1; /* Sit on top */
left: 0;
bottom: 2%;
width: 100%; /* Full width */
height: 92%; /* Full height */
border-radius: 10px;
overflow: auto; /* Enable scroll if needed
background-color: rgb(217,217,217); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
background-color: rgb(255,255,255);
-webkit-animation-name: slideIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
.overlay h3{
color: black;
text-align: left;
margin-left: 15%;
}
.overlay p {
font-size: 0.2em;
color: black;
float: left;
width: 100%;
}
.overlay a {
font-size: 0.8em;
color: black;
float:left;
}
.overlay-header {
padding: 1px 16px;
background-color: #fff;
color: black;
text-align: center;
border-bottom: 2px solid #ffcc00;
}
.overlay img{
width: 18%;
float: right;
margin: 1%;
margin-right: -20%;
}
.des{
margin: 15px;
font-size: 1em;
}
.overlay:hover {
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
background-color:#FAFAFA;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provider Section Start -->
<section id="provider" class="services-section section-space-padding
mica-bg">
<div class="container">
<div class="section-title">
<i class="fa fa-paper-plane-o"></i>
<h3 class="white-color"><span>Blume</span></h3>
</div>
<div class="col-md-4 col-sm-6 3d-hover box">
<div class="services-detail hover-effect-2d top">
<i><img src="container/rfid/micarfid.png" alt="micarfid"
style="background-color:#ffcc00; border:5px solid #ffcc00; border-
radius: 10px; width:200px; margin-left:-15px;"></i>
<h5>Blume</h5>
<hr>
<p>This is a test for blume.</p>
</div>
<div class="overlay">
<div class="overlay-header">
<img src="test/blume.jpg" alt="blume" style="width:15%;float:right; margin-right:10%;margin-top:0.5%;background:#ffcc00;border:2px solid #ffcc00; border-radius: 10px;">
<h3>Blume</h3>
</div>
<div class="des">
<p>This is a test for blume.<</p>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Tutorial</p><i class="fa fa-youtubeOverlay fa-youtube-play"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">PDF-Doku</p><i class="fa fa-pdfOverlay fa-file-pdf-o" style="margin-top:-10px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:10px;float:left;">Image Download</p><i class="fa fa-zipOverlay fa-file-archive-o" style="margin-top:-15px;"></i>
</div>
<div class="body col-md-10 col-sm-6">
<p style="width:100%;margin-top:8px;">Application Download</p><i class="fa fa-imgOverlay fa-picture-o" style="margin-top:-80px;"></i>
<img src="images/application.png" alt="application" style="width:80%;float:left; margin-top:-20px;margin-left:50px;">
</div>
</div>
</div>
</div>
</section>
<!-- Provider Section End -->
<!-- Back to Top Start -->
<i class="fa fa-long-arrow-up"></i>
<!-- Back to Top End -->
<!-- All Javascript Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugin.js"></script>
<!-- Main Javascript File -->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/js.js"></script>

It's likely that this issue is caused by the use of position: fixed in your overlay element.
Position fixed elements geometry historically relates to the initial containing block (most often the viewport).
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
For a full cross browser implementation try using position:absolute instead, making sure the containing element (div.box) makes use of position:relative.

Animated (shrinking) Resizing Header On Scroll in bootstrap

function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew= this.href;
var str2 = '.html';
if(datanew.indexOf(str2) != -1){
window.location.href = datanew;
}else{
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top},
900, function(){
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
#section0{
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: url(
https://images7.alphacoders.com/669/thumb-1920-669739.jpg);
background-origin: padding-box;
background-repeat: no-repeat;
background-size: cover;
background-position:center top;
}
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon
{
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu{
min-height: 100px;
}
/*#banner{
background: url(.././img/banner/bg.jpg) no-repeat center top;
background-size: cover;
min-height: 100%;
}*/
.logo-name{
font-size: 65px;
margin-top: 140px;
color: #FFB03B;
}
.bannertext{
margin-top: 80px;
}
.bannerelements{
margin-left: 20px;
}
.mahaGov{
width: 70%;
margin-top: 70px;
margin-bottom: 80px;
}
/* button custom style */
.btn-round{
border-radius: 17px;
}
.btn {
padding: 8px 25px;
border: 0 none;
text-transform: uppercase;
margin-left:10px;
margin-right: 10px;
margin-top:25px;
letter-spacing: 2px;
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
.btn-danger {
background: #ef4f50;
color: #ffffff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #c03233;
}
.btn-danger:active, .btn-danger.active {
background: #c03233;
box-shadow: none;
}
.logo{
margin-left: 50px;
margin-top: 20px;
}
#buildingblocks{
padding-left: 3%;
padding-right: 3%;
}
.text-color{
color :#114576;
}
.ptext-size{
font-size: 1.4em;
font-weight: bold;
}
.text-white{
color :#ffffff;
}
/* Custom font effects */
h1{
margin-top: 1px;
margin-bottom: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section align-center" id="section0">
<div class="heading">
<header id="header">
<div id="mySidenav" class="sidenav">
×
Home
About Us
What We Do
Get Involved
Contact Us
</div>
<div class="control">
<div class="col-md-4">
<img src="http://findicons.com/files/icons/2796/metro_uinvert_dock/128/microsoft_new_logo.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate" id="donate">DONATE NOW</button>
</div>
</div>
</header>
<div class="col-md-12 home-col12">
<div class="col-md-5">
<div class="bannertext bannerelements">
<h1>45% of youth</h1>
<h1>make the wrong</h1>
<h1>career and</h1>
<h1>life choices.</h1>
</div>
<div class="bannerelements">
<br>
<p class="text-color ptext-size">The Right Education can change that</p>
</div>
<div class="row">
<button type="button" class="btn btn-danger btn-round" style="margin-left: 40px;">BE A PART OF CHANGE</button>
</div>
<div class="row bannerelements mahaGov">
<img src="assets/img/home/banner/mahaGov1.png" class="pull-left img-responsive" alt="Govt. of Maharashtra Logo">
</div>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</div>
hello this code is for the menu-bar as well as section.my website is divided in sections.each section is full page height 100% for all screen.i want to set my header fixed on top but i want to shrink my menu or Resize my menu on Scroll of Page.as in this link "http://trungk18.github.io/Resizing-Header-On-Scroll/"

aref links opening in new window

I am trying to create webpage with menus and each menu item is separate html page. While clicking the menu items they open up in the separate page(hiding the menu) which don't want as the user should be able to click on other menu they should open up in same page with menu item being displayed all time. I tried several thing but cant establish it.
Below is the html :
<DOCTYPE html>
<html>
<head>
<title>gurukul_admin</title>
<link rel="stylesheet" href="gurukul_admin.css">
<link rel="stylesheet" href="iframe.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<iframe width = "1120" class = "iframe" height = "900" style="float:right" name="admission"></iframe>
</head>
<body>
<div class="left-menu">
<div class="logo"><i class="fa fa-align-justify"></i>
<div>Pure CSS Accordion Nav</div>
</div>
<div class="accordion">
<div class="section">
<input type="radio" name="accordion-1" id="section-1" checked="checked"/>
<label for="section-1"><span>Dashboard</span></label>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-2" value="toggle"/>
<label for="section-2"><span>Admissions</span></label>
<div class="content">
<ul>
<li><i class="fa fa-inbox"></i><span>Application Decision</span></li>
<li><i class="fa fa-share"></i><span>Enrol/Reject</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-3" value="toggle"/>
<label for="section-3"> <span>Enrolment</span></label>
<div class="content">
<ul>
<li><i class="fa fa-cog"></i><span>Section Allocation</span></li>
<li><i class="fa fa-group"></i><span>Change Section</span></li>
<li><i class="fa fa-sitemap"></i><span>Exam Allocation</span></li>
<li><i class="fa fa-sitemap"></i><span>Fee Allocation</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-4" value="toggle"/>
<label for="section-4"> <span>Administration</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span><a target="_self" href="acadmgmt.html" >Academic Year</a></span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Section Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Subject Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Fee Category/Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Assessment Codes</span></li>
<li><i class="fa fa-coffee"></i><span>System Users</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-5" value="toggle"/>
<label for="section-5"> <span>Staff Management</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span>Add New Staff</span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
</div>
</div>
</div>
</div>
</body>
</html>
Below is css
#import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
#import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
color: #FFF;
width: 100%;
}
.accordion .section {
width: 100%;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked + label {
background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
content: " ";
position: absolute;
border-left: 3px solid #21CCFC;
height: 100%;
left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
max-height: 300px;
opacity: 1;
z-index: 10;
overflow-y: auto;
}
.accordion .section label {
position: relative;
cursor: pointer;
padding: 10px 20px;
display: table;
background: #222;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion .section label:before {
content: " ";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #363636;
}
.accordion .section label:hover {
background: #363636;
}
.accordion .section label span {
display: table-cell;
vertical-align: middle;
}
.accordion .section:last-of-type {
border-bottom: 1px solid #363636;
}
.accordion .section .content {
max-height: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
position: relative;
overflow-y: hidden;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1ABC9C;
font-family: 'Quicksand', sans-serif;
}
.left-menu {
background: #222;
width: 210px;
position: absolute;
top: 0;
bottom: 0;
}
.accordion {
font-size: 14px;
}
.accordion .section .content {
padding: 0 15px;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked ~ .content {
padding: 15px;
}
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 10px;
}
ul li i {
font-size: 13px;
width: 15px;
margin-right: 15px;
}
ul li:hover {
cursor: pointer;
}
ul li:hover i {
color: #21CCFC;
}
.logo {
padding: 30px 10px;
width: 200px;
text-align: center;
color: #FFF;
font-size: 20px;
}
.logo i {
font-size: 70px;
color: #21CCFC;
}
I tried with iframe but alignment changes on different screen size it looks horrible *
Iframe css
iframe {
margin-top: 0px;
margin-bottom: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 1px;
border-radius: 1px;
border: none;
background-color:#1ABC9C;
scrolling="no";
}
a:link, a:visited {
background-color: #363636;
color: white;
text-decoration: none;
}
a:hover, a:active {
background-color: #363636;
color: white;
text-decoration: none;
}

Not sure how familiar you with JQuery, but this might be helpful:
I would write a script, that would change the iframe src value to the corresponding url of the page on click.
In your case it would look something like this:
script.js
$("a").click(function(event, target){
event.preventDefault();
console.log(event.target);
$("#myiframe").attr("src", $(event.target).attr("href"));
});
Instead of a you can assign classes to the links in your menu, and put them in the code instead of "a".
In your index.html
<div>
<iframe src="anyurl.com" id="myiframe"></iframe>
</div>
It is important that you provide an id to your iframe to call it properly from the script.
Delete target attribute from your menu links, as they are not necessary anymore.

After lot of deliberation and hits and misses I eventually found out that I had to position my iframe under and position it accordingly

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
});