I'm having some trouble with links. I tryed to make a cool looking hover effect on my images but destoyed the option to click a link. Obviosuly the problem is somewhere in the css transition part... I think the overlay "kills" it but I'm not a expert. Thank you for all your anwasers in advance.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>projects</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="css2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div class="logo" >
<img src="lg.png" alt="" width="180" height="178" class="logo"/>
</div>
<nav> PROJECTS ABOUT CONTACT
</nav>
<div class="ozadje">
<div class="table">
<div class="vrsta">
<div class="okno">
<div class="raste">
<img src="logo.jpg" alt="" width="300"/>
<a href="Logofolio.html" class="transition" ></a>
<div class="mask">
<h2>Logofolio</h2>
<p> Colection of my logos for a veriety of<br> different clients.</p>
</div>
</div>
</div>
<div class="okno">
<div class="raste">
<img src="vodka.jpg" alt="" width="300"/>
<a href="Logofolio.html" class="transition" ></a>
<div class="mask">
<h2>ELITE VODKA</h2>
<p> The idea was make a vodka design stand out from the competiotion and also give a strong symbolistic concept. </p>
</div>
</div>
</div>
<div class="okno">
<div class="raste">
<img src="tamn.jpg" alt="" width="300"/>
<a href="Logofolio.html" class="transition" ></a>
<div class="mask">
<h2>PERFUME DESIGN</h2>
<p> A simplistic perfume design for women. Saying as much as possible, with as little as possible but still achive clarity, balance and harmony. </p>
</div>
</div>
</div>
<div class="vrsta">
<div class="okno">
<div class="raste">
<img src="pedall.jpg" alt="" width="300"/>
<a href="Logofolio.html" class="transition" ></a>
<div class="mask">
<h2>GUITAR PEDAL</h2>
<p> You can have good sounding pedal that looks boring. What it you could have the best of<br> both worlds? </p>
</div>
</div>
</div>
<div class="okno">
<div class="raste">
<img src="keww.jpg" alt="" width="300"/>
<a href="Logofolio.html" class="transition" ></a>
<div class="mask">
<h2>Kew Guide</h2>
<p> Kew garden has a ton of beautiful sites to see all year around. Don't know where to start? Grab a brochure to make your life easy. </p>
</div>
</div>
</div>
<div class="okno">
<div class="raste">
<img src="moca.jpg" alt="" width="300"/>
<a href="Logofolio.html" class="transition" ></a>
<div class="mask">
<h2>MOCA SHOP</h2>
<p> A organic coffee shop design<br> inspired by coffee.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>copyright 2016 matic toni</footer>
</body>
css
#charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
nav:before {
border-radius: 50%;
overflow: hidden;
}
nav:before,
.table {
display: table;
margin: auto;
max-width: 600%;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body { background-color: #F6F6F6;
margin: 0;
}
.raste img {
display: block;
border: none;
border-radius: 10px;
}
.vrsta{
overflow: hidden;
}
.okno {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
border-radius: 10px;
}
.raste {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: solid black;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: black url(../images/bgimg.jpg) no-repeat center center;
border-radius: 10px;
}
.raste .mask,.raste .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
border-radius: 10px;
}
.raste img {
display: block;
position: relative;
border-radius: 10px;
}
.raste h2 {
text-transform: uppercase;
font-family: sans-serif ;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.raste p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.raste img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
border-radius: 10px;
}
.raste .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(149,149,149,0.62) ;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border-radius: 10px;
}
.raste h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.raste p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.raste:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
border-radius: 10px;
}
.raste:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.raste:hover h2,
.raste:hover p,
.raste:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.raste:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.raste:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
Change your items html like this:
<div class="okno">
<div class="raste">
<a href="Logofolio.html" class="transition" >
<img src="tamn.jpg" alt="" width="300"/>
<div class="mask">
<h2>PERFUME DESIGN</h2>
<p> A simplistic perfume design for women. Saying as much as possible, with as little as possible but still achive clarity, balance and harmony. </p>
</div>
</a>
</div>
</div>
You have to wrap your item inner html in <a> tag :)
Related
I am trying to make some hover effects over an image. See a demosite here. I am getting stuck now, because I would like the box there is coming when you hover to be centered on each image, no matter what the image size is.
I have tried to place the hover with padding, but that is not a good solution. Does anybody knows how I can center the gradient overlay on each picture, no matter the size og the picture?
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.hovereffect:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 85%;
width: 85%;
position: absolute;
top: -20%;
left: 8%;
padding: 70px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="hovereffect">
<img class="img-responsive" src="https://www.capitalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-view.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-5">
<div class="hovereffect">
<img class="img-responsive" src="https://www.carzone.ie/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
Firt make the image container inline-block so that its width is defined by its content then you can easily adjust the overlay:
.hovereffect {
display:inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
text-decoration: none;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 85%;
width: 85%;
top:7.5%; /* (100% - 85%)/2 */
left:7.5%;
position: absolute;
}
.hovereffect:hover a.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="hovereffect">
<img class="img-responsive" src="https://www.capitalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-view.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-5">
<div class="hovereffect">
<img class="img-responsive" src="https://www.carzone.ie/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
For some reason, my CSS3 Transitions are working on every browser except for on Safari (tested on iOS). I believe I've done everything right, but it's just not working.
Codepen: https://codepen.io/KingKundi/pen/RgMmJp
HTML:
/*
==========================
Universal
==========================
*/
* {
font-family: "Heebo";
}
h1 {
font-size: 4rem;
color: #4d4d4d;
}
h4 {
font-size: 2rem;
color: #0072ff;
}
h2 {
font-size: 2.5rem;
color: #0072ff;
padding: 2rem 2rem;
}
p {
line-height: 2rem;
padding: 0 2rem;
font-size: 1.3rem;
color: #4d4d4d;
}
a {
outline: none;
}
.center {
margin-left: auto;
margin-right: auto;
}
.center-text {
text-align: center;
}
.center-v {
display: flex;
align-items: center;
}
/*
==========================
Home
==========================
*/
.hero {
background-color: #ffffff;
}
.intro {
padding-top: 5rem;
}
.img-circle {
border-radius: 50%;
}
.hero-link {
color: #000000;
font-size: 3rem;
}
.fa {
font-size: 5.5rem;
padding: 0.5rem 2rem;
color: #4d4d4d;
}
.fa:focus {
color: #4d4d4d;
}
.fa:hover {
color: #0072ff;
}
.fa-home {
font-size: 3rem;
position: fixed;
}
.fa-project {
color: #ffffff;
z-index: 11;
font-size: 4rem;
position: absolute;
bottom: 0;
right: 0;
}
/*
==========================
Project tiles
==========================
*/
#media (max-width: 1000px) {
#project-break {
width: 100%;
margin-left: 0;
}
}
.tile {
height: 27rem;
width: 100%;
margin:10px;
display:inline-block;
background-size:cover;
position:relative;
cursor:pointer;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow:hidden;
color:white;
}
.tile img {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.tile .text {
z-index: 11;
position:absolute;
padding:30px;
height:calc(100% - 60px);
}
.tile h1 {
color: #ffffff;
font-size: 1.75rem;
font-weight:300;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile p {
color: #ffffff;
font-weight: 300;
margin: 20px 0 0 0;
-webkit-transform: translateX(-200px);
-o-transform: translateX(-200px);
-moz-transform: translateX(-200px);
-ms-transform: translateX(-200px);
transform: translateX(-200px);
transition-delay: 0.2s;
}
.animate-text {
opacity:0;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.tile:hover {
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.tile:hover img {
opacity: 0.2;
}
.tile:hover .animate-text {
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity:1;
}
/*
.tile:hover span {
opacity:1;
transform:translateY(0px);
-webkit-transform:translateY(0px);
-o-transform:translateY(0px);
-moz-transform:translateY(0px);
-ms-transform:translateY(0px);
}
*/
#media (max-width: 550px) {
.tile p {
font-size: 1.1rem;
line-height: 1.5rem;
}
}
#media (max-width: 320px) {
.tile p {
font-size: 0.9rem;
line-height: 1.5rem;
}
}
.fa-fade {
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pomodoro {
background-image: url("assets/pomodoro-site.png");
background-position: center;
}
.duelr {
background-image: url("assets/duelr-site.png");
background-position: center;
}
.grt-bot {
background-image: url("assets/grt-site.png");
background-position: center;
}
.pomodoro:after,
.duelr:after,
.grt-bot:after {
content: " ";
z-index: 10;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
p > a {
color: #ffffff;
}
p > a:hover {
color: #0072ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/7743338bf9.js"></script>
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
<link rel="stylesheet" href="static/normalize.css">
<link rel="stylesheet" href="static/skeleton.css">
<link rel="stylesheet" href="static/main.css">
<link rel="icon" href="static/assets/favicon.png">
</head>
<body>
<div class="hero center-text">
<div class="container">
<section class="intro twelve columns">
<div class="row">
<h2>projects</h2>
<div class="row">
<div class="one-half column" id="project-break">
<div class="tile u-max-full-width pomodoro">
<div class="text center-text">
<h1>Pomodoro</h1>
<p class="animate-text">
Pomodoro is a productivity oriented web application which incentivizes the<br>Pomodoro Technique.
</p>
<p class="animate-text">
Built with: Django/Python, HTML5, CSS, JavaScript, jQuery, and AJAX.
</p>
</div>
<i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"></i>
</div>
</div>
<div class="one-half column" id="project-break">
<div class="tile u-max-full-width duelr">
<div class="text center-text">
<h1>Duelr</h1>
<p class="animate-text">
An online multiplayer 1v1 fighting game.
</p>
<p class="animate-text">
Built with: JavaScript, Node.js, Express.js, Socket.io, HTML5, CSS, and Phaser.
</p>
</div>
<i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="tile u-max-full-width center grt-bot">
<div class="text center-text">
<h1>GRT Messenger Bot</h1>
<p class="animate-text">
The Grand River Transit Bot is a service published on Facebook Messenger which yields real-time bus information to users through HTTP requests.
</p>
<p class="animate-text">
Built with: JavaScript, Node.js, Express.js, and API.ai.
</p>
</div>
<i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="row">
<h2>contact</h2>
</div>
</div>
</div>
<script src="static/app.js"></script>
</body>
</html>
I don't know about transition on click but I do get a transition of sliding project description from left when I hover over the project tile.
Test and works on MacOS Safari and iOS Safari as well, but since it's a touch environment the transition doesn't happen unless you click on it.
I'm adapting a portfolio code that was kindly posted by James here: http://codepen.io/SeamlessThemes/pen/LiBdo
I've managed to change most things that I need, but I can't for the life of me get the href to cover the responsive block. At the moment only the "View" link and padding are active.
I'll reproduce the code here so that you don't need to visit codepen if you'd rather not
* {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.view {
width: 32.33%;
height: auto;
margin-right: 0px;
float: left;
border: 1px solid #e5e5e5;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #079;
}
.view:last-child {
margin-right: 0px;
}
.view .mask, .view .content {
width: 32.33%;
height: 100%;
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;
padding: 10px;
background: #222;
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
.view-portfolio img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-portfolio .mask {
background-color: #222;
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-portfolio h2 {
background: #222;
color: #FFF;
}
.view-portfolio p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #FFF;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-portfolio:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.view-portfolio:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.view-portfolio:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
<div class="view view-portfolio">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
<div class="mask">
<h2>Portfolio Item 1</h2>
<p>This is an example portfolio item exceprt.</p>
View
</div>
</div>
<div class="view view-portfolio">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
<div class="mask">
<h2>Portfolio Item 2</h2>
<p>This is another example portfolio item exceprt.</p>
View
</div>
</div>
<div class="view view-portfolio">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
<div class="mask">
<h2>Portfolio Item 3</h2>
<p>This is yet another example portfolio item exceprt.</p>
<a href="#" class="info">View</>
</div>
</div>
.view a.info {
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
}
You can adjust it accordingly.
I don't really understand the question but if you want a link on the image...
<div class="view view-portfolio">
<a href="http://www.w3schools.com/html/">
<img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
</a>
<div class="mask">
<h2>Portfolio Item 1</h2>
<p>This is an example portfolio item exceprt.</p>
View
</div>
</div>
I am trying to get these div's to center (all 3 next to each other to be in the center of the page), however I cannot get them to center.
Here is how they look, as an example: http://callum.website/
Code:
HTML
<div class="containercontainer">
<div class="containerleft">
<figure class="image-container">
<img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">
<figcaption class="clearfix">
<h4>eSportsy - FREE PSD Template</h4>
<p>in <font color="0ead99"><B>FREEBIES</B></font></p>
Download
</figcaption>
</figure>
</div>
<div class="container">
<figure class="image-container">
<img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">
<figcaption class="clearfix">
<h4>eSportsy - FREE PSD Template</h4>
<p>in <font color="0ead99"><B>FREEBIES</B></font></p>
Download
</figcaption>
</figure>
</div>
<div class="containerright">
<figure class="image-container">
<img src="https://d13yacurqjgara.cloudfront.net/users/430915/screenshots/2031943/untitled-7_1x.png" alt="eSportsy - eSports PSD Template" width="400" height="300">
<figcaption class="clearfix">
<h4>eSportsy - FREE PSD Template</h4>
<p>in <font color="0ead99"><B>FREEBIES</B></font></p>
Download
</figcaption>
</figure>
</div>
body{
background: #F3F3F3;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
color: #2A2A2A;
}
h4 {
color: #fff;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.containercontainer{
width: 66%;
margin: 0 auto;
max-width:100%;
text-align: center;
}
.containerleft {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
float:left;
}
.container {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
}
.containerright {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
float: right
}
.container a{
text-decoration:none;
}
.container img{
bottom: 0;
display: block;
height: auto;
max-width: 100%;
}
.button {
background: #0084b4;
border-radius: 3px;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 4px 8px;
position: absolute;
right: 20px;
top: 30px;
}
.button:hover {
background: #2D76B9;
color: #fff;
}
.dlbutton {
background: #0ead99;
border-radius: 3px;
color: #fff;
display: inline-block;
font-weight: bold;
padding: 4px 8px;
position: absolute;
right: 20px;
top: 30px;
}
.dlbutton:hover {
background: #0eb49f;
color: #fff;
}
.image-container {
border: 6px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
overflow: hidden;
position: relative;
width: 400px;
}
.image-container img {
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
.image-container:hover img {
-webkit-transform: translateY(-45px);
-moz-transform: translateY(-45px);
-ms-transform: translateY(-45px);
-o-transform: translateY(-45px);
transform: translateY(-45px);
}
.image-container:hover figcaption {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .4s, opacity .1s;
-moz-transition: -moz-transform .4s, opacity .1s;
-ms-transition: -ms-transform .4s, opacity .1s;
-o-transition: -o-transform .4s, opacity .1s;
transition: transform .4s, opacity .1s;
}
.image-container figcaption {
background: #283449;
bottom: 0;
color: #fff;
height: 50px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
-moz-transition: -moz-transform .4s, opacity .1s .3s;
-ms-transition: -ms-transform .4s, opacity .1s .3s;
-o-transition: -o-transform .4s, opacity .1s .3s;
transition: transform .4s, opacity .1s .3s;
width: 360px;
}
You just need to remove the margin-left from .image-container.
.image-container { margin-left:0; }
Change the size of containerright (from CSS) from 66% to 92%. This will align all the divs in center as well as wouldn't disturb page responsiveness.
Remove:
float: left;
float: right;
and they become centered.
.containerright {
height: 312px;
width: 412px;
font: 87.5%/1.5em sans-serif !important;
margin-top:20px;
display: inline-block;
text-align:left !important;
...
margin:0 auto; // add this
}
Do the same for other container too Which is in centre
I would like to align six spans horizontally. I'm using Wordpress to create the page. This is the code: (you can find the Css in the jsFiddle link at the bottom of the question)
HTML
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
[...]
<span class="sixth">
<a href="">
<div class="viewProf view-first">
<img alt="" src="" />
<div class="maskProf">
<h2>Title</h2>
<p>Role</p>
</div>
</div>
</a>
</span>
CSS
.sixth {
width: 13.6%;
vertical-align: bottom;
}
.viewProf {
width: 140px;
height: 140px;
margin: 5px;
float: left;
border: 3px solid #780b07;
border-radius: 7px;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 4px 4px 6px #444;
cursor: pointer;
}
.viewProf .maskProf,
.viewProf .contentProf {
width: 140px;
height: 140px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.viewProf img {
display: block;
position: relative
}
.viewProf h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 13px;
padding: 11px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.viewProf p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 15px 25px 25px;
text-align: center
}
.viewProf a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.viewI a.info:hover {
box-shadow: 0 0 5px #000
}
.view-first .maskProf {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219, 127, 8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .maskProf {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
And this is the result:
How to remove the space at the bottom of the first span?
EDIT
The code in the jsFiddle works but the result in wordpress doesn't. I have tried with different browsers and I got the same problem. What could it be?
http://jsfiddle.net/userK/9zodn23h/
As requested to specify:
Fiddle: http://jsfiddle.net/mptpL5mx/2/
You want to use a clearfix (div that can wrap your floated items and allow them to work properly without breaking outside of itself)
Then you will want to float your items so they line up nicely.
Also clean up your markup (no block level items inside inline items)
HTML:
<div class="holder clearfix">
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
<span class="sixth">
<div class="viewProf view-first">
<img alt="" src="" />
</div>
</span>
</div>
CSS:
.clearfix:before,
.clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
.holder{
background-color: #eee;
padding: 10px;
}
.sixth{
height: 50px;
width: 50px;
float: left;
border: 1px solid #000;
background-color: #fff;
margin-right: 5px;
border-radius: 5px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}