I am trying to place quote1.jpg next to yoda.png, but no matter where I place the div class it ends up somewhere else. First it was on top of the header now it is covering up Yoda. When you hover your mouse over Yoda it is supposed to show his quote but instead it shows the quote.jpg. All I am trying to do is place the quote.jpg next to Yoda.
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 2;
}
.text {
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
/* No matter what I do I cannot
place the quote1.jpg in the correct place */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class= "container">
<img src="yoda.png" alt="Yoda"
class= "image" style = "width:50%">
<div class="text">That right, you got.
Herh herh herh.
<div class ="middle">
<img src="quote1.jpg" alt="quote">
</div>
</body>
</html>
It is easier to use javascript or jquery to implement what you intend.
Here is a sample code:
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.text {
display:block;
opacity: 0;
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
.flex-container {
display: flex;
flex-flow:row wrap;
}
.block{
display: block;
background: red;
margin: 10px;
padding: 10px;
width:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function show() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
function hide() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
</script>
</head>
<body>
<div class="header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class="parent">
<div class="flex-container">
<div class="block yoda-div" id="yoda">
<img src="yoda.png" alt="Yoda" class="image" onmouseover="show()">
<div class="text" onmouseout="hide()">That right, you got.
Herh herh herh.
</div>
</div>
<div class="block" id="quote">
<img src="quote1.jpg" alt="quote">
</div>
</div>
</div>
</body>
</html>
Hello if I understood your question, this might be of help.
.container {
display: flex;
flex-direction: row
flex-wrap: wrap;
}
.custom-img {
height: 45vh;
width: 100%;
object-fit: cover
}
.sections {
position: relative;
margin: 2px;
border: 1px solid green
}
.section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background-color: #000;
padding: 2px;
font-size: 18px
}
<div class="container">
<div class="sections">
<div class="section-text">This is the left section</div>
<img class="custom-img" src="https://slicedinvoices.com/wp-content/uploads/edd/2015/12/better-urls.jpg" />
</div>
<div class="sections">
<div class="section-text">This is right section</div>
<img class="custom-img" src="https://yazoogle.com.au/wp-content/uploads/2017/04/urls.jpg" />
</div>
</div>
Hope this helps
Move your quote1 div below the yoda img tag.
2.Modify your following css classes
.middle {
transition: .5s ease;
opacity: 0;
display: inline;
transform: translate(-50%, -50%);
}
.image {
opacity: 1;
display: inline;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
Related
I am working on a project and I want to make it look as sleek as possible, I want the website to look beautiful while also being responsive and functioning, I am trying to animate text emelents to appear so that when you scroll to them, they slide in from the sides, or something like that, I have tried Fireship's method but thtat does not seem to be working.
Here is my code:
#import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#700&display=swap');
html body {
background: #0e1212;
font-family: 'Roboto Mono', monospace;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
font-family: 'Roboto Mono', monospace;
}
.main {
display: grid;
justify-content: center;
min-height: 100vh;
text-align: center;
position: absolute;
top: 25%;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: #DBDBDB;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: #622cd8;;
transition: 0.5s;
animation-name: example;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.active {
color: #808080;
}
.active:hover {
color: #808080;
animation-name: active;
}
#keyframes active {
0% {
color: #808080;
}
100% {
color: #808080;
}
}
#keyframes example {
0% {
color: #DBDBDB;
}
100% {
color: #622cd8;
}
} .hidden{
opacity: 0;
filter: blur(5px);
transform: translateX(-100%);
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
<!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.0">
<link rel="stylesheet" href="home.css">
<script src='script.js'> </script>
<title>Home</title>
</head>
<body>
</head>
<body>
<ul id='menu' >
<li><a class="active" href="#home" id="home">.home()</a></li>
<li><a class="inactive" href="#news">.about()</a></li>
<li><a class="inactive" href="#contact">.stuffs()</a></li>
<li><a class="inactive" href="#about">.apply()</a></li>
</ul>
<div class="main">
<section>
<h1 style="text-align: center; color:#DBDBDB; font-size: 100px" >cosmic<span style="color: #622cd8">.club()</span></h1>
<p style="font-size: 25px; color: #ABACAC; position: relative; top: -5%">a modern, advanced, and minimalistic web service</p>
</section>
<section>
<h1>More</h1>
<p>this is also a centered section</p>
</section>
</div>
</body>
</html>
Can I use pure CSS or do I have to use Javascript
html file :
<section>
<div class="container reveal">
<div class="text-container">
<p>
Lorem ipsum dolor sit amet consectetur .
</p>
</div>
</div>
</section>
CSS file:
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: 1s all ease;
}
.reveal.active{
transform: translateY(0);
opacity: 1;
}
js file:
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<div class="video" src="video3344.mov" autoplay loop muted type="video/mp4"></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <strong>FLOW</strong></p>
</div>
</div>
</div>
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
.mt-50 {
margin-top: 50px;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
}
.top-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
}
.top-wrapper {
padding: 65px 0 0px 0;
text-align: center;
position: relative;
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<video autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of
<strong>FLOW</strong>
</p>
</div>
</div>
I am currently working on an image gallery where I have different sections that have multiple images. I am currently trying to set up each section of images to be a single row and scoll horizontally similar to what netflix does. Right now I've been unable to get the container to overflow in the x to work and instead goes to a second row.
I've tried using
white-space: nowrap
overflow-x: auto;
overflow-y:hidden;
display: inline-block;
I've also tried taking a containing div for the list and rotating it 90 deg and allow vertical scrolling and then rotating a child div back.
The best I've been able to get for the effect I'm trying to acheive is the second example but I've been unable to get the width correct on the containing wrapper. I'm trying to get the row all the way across.
First example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
}
ul > .gallery {
float: left;
white-space: nowrap;
overflow-x: auto;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Second Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
transform: rotate(-90deg);
/* transform-origin: right top; */
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
transform: rotate(90deg);
/* transform-origin: right top; */
}
ul > .gallery {
width: 100%;
height: 100%;
float: left;
display: inline;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<!-- <div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div> -->
</div>
</div>
</body>
</html>
In the second exampe I'm getting the scolling I'm looking to get but not the width. Any help would be much appreciated.
You can add a fixed width to your .section wrapper instead of 100%
example: 1000px
Both display:inline-block and float:left will detect if there are spaces beside them so you should set a fixed width container.
I'm not sure how to add a grid below the current background picture and continue adding info. When I try adding a grid now, it just creates one below the navbar and not below the current background.
/**********BODY GENERAL**********/
body {
margin: 0;
}
/* Fix this one day */
.bg-img {
background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: /*rgba(255, 51, 0, .95);
*/
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
<div class="Minfo">
<div class="subtitle">CENTENNIAL
<br>
<div class="title"> It's Academic</div>
<br>
<div class="subtext">Meets every Tuesday in Room 506</div>
</div>
</div>
</header>
<!--Don't even -->
</div>
</body>
</html>
codepen (Please open in full page mode):
An example of how I would want it to look is like on this website, where all the info is under that background.
I'm not sure what you mean. There are 2 options in my mind:
Push the grid below the image. In this case, just move the header tag from .bg-img and put it after. https://codepen.io/moshfeu/pen/ERWVdZ
You want the fixed effect (just like the website you attached). In this case, you need to use position: fixed on the header.
https://codepen.io/moshfeu/pen/aKJvXW
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Would love to know how to make my images centered not floating to the left. I tried modifying the float attributes but things just go messy. Help please!
I'm using section tags no grid thingy whatsoever.
When I set the float to "none" this 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: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(12, 19, 27, 0.6);
width: 400px;
padding: 105px;
height: 450px;
opacity: 0;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 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: all 0.5s linear 0s;
}
.view-second p {
transform: scale(0);
transition: all 0.5s linear 0s;
}
.view-second a.info {
opacity: 0;
transform: scale(0);
transition: all 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 some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</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 some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</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 some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</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 some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</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 some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</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 some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Just make some changes in your css and you can easily get your desired result through the 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;
}
DEMO
what about the good old margin: 0 auto; for centering elements?
okay and what about this, for centering the images?
display: block;
margin-left: auto;
margin-right: auto
Another possible solution could be the display: table-cell; css rule and then with the horizontal/vertical alignment. I'm currently at work and cannot test it.
.view {
background: url("../images/bgimg.jpg") no-repeat scroll center center #fff;
border: 10px solid #fff;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
display: block;
margin: auto;
overflow: hidden;
position: relative;
text-align: center;
width: 300px;
}