I am kinda new to the whole html/css thing, but i managed to make a decent page for my portfolio website, so far. The things is, that is looks like crap in Internet Explorer. I have tried to optimize it, so that my css animations work and so forth, but i can't seem to make it work properly.
www.thomasteilmann.dk
If you take a look, you'll know what i mean. It should work properly in anything but IE.
if anyone could give me some advice on how to reach my goal, that would be great! :)
And yes, i know my code is messy :P
classes below:
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
<head>
<title>thomasteilmann.dk</title>
</head>
<body>
<div class="header">
<h1><img src="images/thomas_logo_Web.png" alt="Sick Logo" /></a></h1>
</div>
<div id="content">
<div class="view-first">
<img src="images/cosmic_art_icon.jpg"/>
<div class="mask">
<h2>Cosmic Art</h2>
<p>A galleri of cosmic art made in Photoshop</p>
View
</div>
</div>
<div class="view-second">
<img src="images/thomas_web.jpg"/>
<div class="mask">
<h2>About myself</h2>
<p>Information about my skills and my personality in general</p>
View
</div>
</div>
<div class="view-third">
<img src="images/web_web.jpg"/>
<div class="mask">
<h2>Websites</h2>
<p>A list of websites i've made/worked on.</p>
View
</div>
</div>
<div class="view-fourth">
<img src="images/ice_age_web.jpg"/>
<div class="mask">
<h2>Cartoon Art</h2>
<p>A galleri of Cartoon art made in Photoshop</p>
View
</div>
</div>
</div>
</body>
</html>
Css:
body {
background: #21211f;
width: 100%;
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
padding: 0px 0 0 0;
}
.header{
position: absolute;
width: 700px;
padding-bottom:50px;
margin-left: 23%;
float: left;
}
h1 img{
padding: 0;
margin: 0;
}
#content{
width: 50%;
height: 500px;
line-height: 22px;
font-size: 18px;
font-family: Georgia, times, serif;
float: left;
color: #ffffff;
margin-left: 22%;
margin-top: 20%;
padding: 20px 30px 20px 30px;
}
img {
border: none;
}
/*
* View one
*/
.view-first {
width: 279px;
height: 198px;
margin: 3px;
margin-left: 33px;
float: left;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-first .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-first img {
display: block;
position: relative;
-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 h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s 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 {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s 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 a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.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 .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.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 a.info:hover {
box-shadow: 0 0 5px #000;
}
.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);
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-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)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.4s;
-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.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
/**
* View two
*/
.view-second {
width: 279px;
height: 198px;
margin: 3px;
margin-left: 400px;
float: right;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-second .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-second img {
display: block;
position: relative;
-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-second h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s 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-second p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 0px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s 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-second a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.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-second .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.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-second a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-second: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);
}
.view-second:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
}
.view-second:hover h2,
.view-second:hover p,
.view-second:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-second:hover p {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-second:hover a.info {
-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 three
*/
.view-third {
width: 279px;
height: 198px;
margin: 3px;
margin-left: 33px;
float: left;
margin-top: 240px;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-third .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-third img {
display: block;
position: relative;
-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-third h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s 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-third p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s 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-third a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.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-third .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.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-third a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-third: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);
}
.view-third:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
}
.view-third:hover h2,
.view-third:hover p,
.view-third:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-third:hover p {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-third:hover a.info {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/**
* View four
*/
.view-fourth {
width: 279px;
height: 198px;
margin: 3px;
margin-top: 240px;
margin-left: 400px;
float: right;
border: 5px solid white;
overflow: hidden;
position: absolute;
text-align: center;
box-shadow: 1px 2px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view-fourth .mask, .view .content {
width: 279px;
height: 198px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view-fourth img {
display: block;
position: relative;
-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-fourth h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
opacity: 0;
-webkit-transition: all 0.4s 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-fourth p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 0px;
text-align: center;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
-webkit-transition: all 0.4s 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-fourth a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
-ms-filter: "progid: DXImageTransform.Microsoft.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-fourth .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.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-fourth a.info:hover {
box-shadow: 0 0 5px #000;
}
.view-fourth: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);
}
.view-fourth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
}
.view-fourth:hover p {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-fourth:hover a.info {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
And you have errors in your HTML, like the <link> above the <head> and the </a> without any matching <a>. Run your page through the W3C validator at http://validator.w3.org/ and correct all errors it finds.
Different browsers respond differently to errors, so making it error-free should be the first step in making it multi-browser compatible.
IE, even IE9 does not support CSS transitions AFIAK.
Step one: include a document type declaration at the start of the file, such as:
<!DOCTYPE html>
If you don't, you end up in Quirks Mode, which greatly increases the differences between IE and other browsers.
Your internet explorer uses css 2, but in your code you use the css 3. If you need to use this functionality, the best method is to use a javascript/jquery codding, this will works in internet explorer.
Where did you learn to program in such a way?
You have a very basic website and the CSS that you have is monstrously disproportional.
For your specific website, the CSS should be 10-20 lines of code maximum.
I recommend that you start from scratch and follow this rule.
Your site has issues beyond your messy code. Your background image is entirely too large, taking several seconds for me to load on a new MBP with cable internet.
Your navigation doesn't give your users any idea what your images link to until they mouse over. You'd be better off with a horizontal navigation, using text and smaller thumbnails.
Your Photoshop gallery images are too small. Why do you even have an "About Me" section with nothing about you in it? And black text on a dark gray background?
I don't mean to be super harsh, here. It's better than I was able to produce when I first got into HTML and CSS, but you've got some serious design flaws.
Related
I have added some code to my website built using a Divi builder, in purpose add animated image caption hover effect, on grid of images - four in row.
Everything look great, except when I resize screen: then images starts to overlap.
I have made a lot of research and played with a code but i cant solve this issue. Please help me to find what part of CSS code stands for this overlapping?
Page URL is: http://sylwia.studiopowisle.pl/bb/
.box {
height: 250px;
position: relative;
overflow: hidden;
width: 250px;
margin-left: auto;
margin-right: auto;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: rgba(163, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 250px;
height: 250px;
padding: 130px 20px;
}
.box:hover .overbox {
opacity: 1;
}
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
text-align: center;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
.mendo-links {
text-transform: lowercase;
font-size: 36px;
position: relative;
color: white;
text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
text-align: center;
vertical-align: middle;
margin-top: 26%;
}
.mendo-links-purpose {
font-size: 40px;
position: absolute;
top: 40%;
left: 21%;
color: white;
text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
}
.mendo-links-passion {
font-size: 40px;
position: absolute;
top: 40%;
left: 23%;
color: white;
text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
}
.mendo-lines {
position: absolute;
width: 37%;
top: 33%;
left: 32% !important;
}
.box:hover h4 {
display: none;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box:hover .mendo-lines {
display: none;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.mendo-links-outline {
position: absolute;
width: 91%;
top: 5%;
left: 4.5% !important;
}
.mendo-links-title {
text-transform: lowercase;
font-size: 25px;
text-align: center;
margin-top: -100px !important;
}
.mendo-links-title:first-letter {
text-transform: uppercase;
}
.mendo-links-description {
text-align: center;
font-size: 12px;
margin-left: 20px;
margin-right: 20px;
margin-top: 22px;
line-height: 18px;
margin-bottom: 10px;
}
.mendo-links-read-more {
color: white;
font-size: 13px;
font-weight: bold;
}
<a href="/core-values">
<div class="box">
<p>
<img src="http://sylwia.studiopowisle.pl/wp-
content/uploads/2017/04/Untitled-3.jpg" alt="" />
</p>
<div class="overbox">
<p>
<img class="mendo-links-outline" src="http://sylwia.studiopowisle.pl/wp-
content/uploads/2017/04/outline-2.png" alt="" />
</p>
<div class="title overtext">
<p class="mendo-links-title">Web Design</p>
</div>
<div class="tagline overtext">
<p class="mendo-links-description">Synth jean shorts try-hard art party meh disrupt, forage offal ugh readymade cronut man braid. Readymade chartreuse pinterest sartorial, sustainable hoodie art party.
</p>
<p class="mendo-links-read-more">+ learn more</p>
</div>
</div>
</div>
</a>
Thank you ver much for your help and time,
Best greetings,
Sylwia
The problem is that you manually set the width of .box and .overbox to 250px;
There grid is responsive and should resize the images as you resize the window, giving them fixed width makes them too big and that's why they overlap.
Try giving .box and .overbox width:auto; and notice what happens.
I am trying to animated an image on hover. The result i want to have is similar to this one : See here ( scroll to see the image "Our Team" )
So, I want to have a background where i could display some information ( name, links) exactly like in this theme but I can't achieve it.
Here is my code :
<div class="row">
<div class="col-md-6">
<div class="picture">
<div class="photoapropos center-block">
<div class="info">
<img class="img-responsive img-circle" alt="Name" src="<?= $url; ?>"/>
<p>Name</p>
</div>
</div>
</div>
</div>
</div>
And my CSS :
.picture {
display: block;
opacity: 1;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-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;
}
.photoapropos:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
background: #FF8C00;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-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;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
Can anyone help me because this feature seemed easy to realise but I don't see what i am missing ?
Thanks.
.picture {
display: block;
opacity: 1;
background:url('http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-4.jpg');
border-radius: 50%;
height: 425px;
width: 425px;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-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;
}
.photoapropos:hover .info{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
/*background: #FF8C00;*/
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-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;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
text-align: center;
background: rgba(82, 219, 235, 0.8);
color: #fff;
}
.photoapropos .info p {
margin-top: 50px;
}
<div class="row">
<div class="col-md-6">
<a class="picture" href="<?= $url; ?>">
<div class="photoapropos center-block">
<div class="info">
<p>Name</p>
</div>
</div>
</a>
</div>
</div>
You need to learn how to copy code. Haha!
Please change classes and other things. You can give credit to that site too.
The effect is coming from CSS scale.
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-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;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.item .info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 1;
-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;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.about-img-1 {
background-image: url(https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG);
}
.visible-xs {
display: none!important;
}
.img-circle {
border-radius: 50%;
}
.item .info h3 {
color: #f4f5f7;
font-size: 24px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 120px;
}
.item .info p {
color: #f4f5f7;
color: rgba(244, 245, 247, 0.8);
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 14px;
border-top: 1px solid rgba(244, 245, 247, 0.5);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0.4s;
-moz-transition: all 0.4s ease-in-out 0.4s;
-o-transition: all 0.4s ease-in-out 0.4s;
-ms-transition: all 0.4s ease-in-out 0.4s;
transition: all 0.4s ease-in-out 0.4s;
}
.item .info .list-inline {
font-size: 18px;
}
.item .info ul {
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0.4s;
-moz-transition: all 0.4s ease-in-out 0.4s;
-o-transition: all 0.4s ease-in-out 0.4s;
-ms-transition: all 0.4s ease-in-out 0.4s;
transition: all 0.4s ease-in-out 0.4s;
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.item:hover {
box-shadow: none;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.item:hover .info ul {
opacity: 1;
}
<div class="item about-img-1">
<div class="info">
<!-- Mobile Fallback Image -->
<img class="img-responsive img-circle visible-xs" src="https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG" alt="">
<!-- Name / Position / Social Links -->
<h3>Kalpesh Singh</h3>
<p>KnowKalpesh.in</p>
<ul class="list-inline">
<li><a class="light-text" href="#"><i class="fa fa-facebook fa-fw"></i></a>
</li>
<li><a class="light-text" href="#"><i class="fa fa-linkedin fa-fw"></i></a>
</li>
<li><a class="light-text" href="#"><i class="fa fa-twitter fa-fw"></i></a>
</li>
</ul>
</div>
</div>
The hover part use box-shadow and scale transform property with CSS transitions.
Here's the result with the website example code and the relevant CSS part.
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-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;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.item {
margin: 30px;
}
.about-img-1 {
background-image: url(http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-1.jpg);
}
.img-circle {
border-radius: 50%;
}
.item>a>img, .item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
max-width: 100%;
height: auto;
}
img {
-webkit-backface-visibility: hidden;
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.item .info h3 {
color: #f4f5f7;
font-size: 24px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 120px;
}
.item .info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-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;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.item:hover {
box-shadow: none;
}
Fiddle
Here is an answer for you in Fiddle: https://jsfiddle.net/uhdtv3nv/
.wrapper {
width: 100%;
height: 100%;
background-color: blue;
}
.item {
width: 225px;
height: 225px;
margin: 15px auto;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
-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;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-image: url('http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png');
}
.item:hover {
box-shadow: none;
}
.item:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.info {
position: absolute;
background: rgba(82, 219, 235, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-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;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.item h3 {
padding: 80px 70px;
}
<div class="wrapper">
<div class="item about-img-1">
<div class="info">
<h3>Some text</h3>
</div>
</div>
</div>
For displaying the team members of a platform. I want to show and hide the social media icons when you hover over the image of the team member. I'm using the CSS properties transition and scale to accomplish this.
Here you can see my code: https://jsfiddle.net/johna/L9hbtqce .
(I also use Bootstrap as CSS Framework and Font Awesome for the icons.)
HTML
<div class="team-member text-center">
<div class="picture">
<img src="http://s22.postimg.org/hxl9mdjqp/member.png" class="img-responsive" alt="Ward"/>
<div class="mask">
<div class="team-member-icons">
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
</div>
CSS
.team-member .picture {
background-color: #f2f2f2;
border: 7px solid #dedede;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 225px;
height: 225px;
margin: 0 auto;
border-radius: 50%;
}
.team-member .picture:hover img {
-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;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
.team-member .picture:hover .mask {
-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;
opacity: 1;
}
.team-member .picture:hover .mask .team-member-icons {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture img {
margin: 0 auto;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture .mask {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
border-radius: 50%;
width: 100%;
height: 100%;
}
.team-member .picture .mask .team-member-icons {
-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;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
display: table;
margin: 90px auto;
}
.team-member .picture .mask .team-member-icons a {
background-color: #a5a5a5;
border-radius: 50%;
display: block;
float: left;
height: 34px;
line-height: 32px;
margin: 0 5px;
width: 34px;
}
.team-member .picture .mask .team-member-icons a i {
color: #fff;
}
Everything works fine on Chrome or Firefox but on Internet Explorer (IE11) the image flickers when you "unhover" the circle with the social media icons.
Fixed my problem on Internet Explorer: https://jsfiddle.net/L9hbtqce/15/. I added an opacity of 1 to the image and an opacity of 0 when you hover over the image.
.team-member .picture {
background-color: #f2f2f2;
border: 7px solid #dedede;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: 225px;
height: 225px;
margin: 0 auto;
border-radius: 50%;
}
.team-member .picture:hover img {
-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;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.team-member .picture:hover .mask {
-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;
opacity: 1;
}
.team-member .picture:hover .mask .team-member-icons {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.team-member .picture img {
margin: 0 auto;
width: 100%;
height: 100%;
-ms-transition: 1s;
transition: 1s;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.team-member .picture .mask {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
border-radius: 50%;
width: 100%;
height: 100%;
}
.team-member .picture .mask .team-member-icons {
-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;
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
display: table;
margin: 90px auto;
}
.team-member .picture .mask .team-member-icons a {
background-color: #a5a5a5;
border-radius: 50%;
display: block;
float: left;
height: 34px;
line-height: 32px;
margin: 0 5px;
width: 34px;
}
.team-member .picture .mask .team-member-icons a i {
color: #fff;
}
I have recently designed a site. But problem is in only Internet Explorer 8. Other browsers detect no problem. Problem is only on hover effect.
My style.css file:
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
#media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
#media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
#media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/*stylesheet*/
body{
font-size:14px;
line-height:18px;
color:#fff;
background:#C9C6C5;
}
.wrapper {
}
/*header*/
.header_area {
background: url("../img/header_bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.header_area:after {
background: url("../img/shadows.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
display: block;
height: 13px;
width: 100%;
}
.header {
margin: 0 auto;
overflow: hidden;
padding: 30px 0 40px;
width: 1000px;
}
.logo,.slogan{
float: left;
}
.logo img{width:260px;}
.main_slogan > img {
width: 350px;
margin-left: 32px;
}
.tel {
margin-left: 280px;
overflow: hidden;
}
.tel li {
background: #535353;
float: left;
margin-right: 10px;
padding: 5px 5px 5px 0;
}
.tel span {
background: none repeat scroll 0 0 #2b2b2b;
padding: 6px;
}
.social {float: right;
margin-top: 21px;}
.social li {
float: left;
}
.social li:hover {
opacity: .6;
filter: alpha(opacity=60);
}
.social li img {
width: 48px;
}
.header ul{
margin:0;
padding:0;
list-style:none;
}
/* menu */
.menu {
background: none repeat scroll 0 0 #2b2b2b;
margin: 0 auto;
min-height: 50px;
width: 1000px;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
z-index:9999;
}
.menu ul li {
background: none repeat scroll 0 0 #2b2b2b;
border-left: 1px solid #1b1a1a;
border-right: 1px solid #373636;
display: block;
float: left;
padding: 16px 15px;
text-transform: uppercase;
position:relative;
}
.menu ul li:first-child{border-left:0}
.menu ul li:last-child{border-right:0}
.menu ul li a {
color: #fff;
font-family: keron;
font-size: 13px;
line-height: 16px;
text-decoration: none;
}
.menu ul li:hover{background:#B70C0F; -webkit-transition: all .5s; transition: all .5s;}
/*dropdown menu*/
.menu ul ul,.menu ul ul ul{display:none;}
.menu ul li:hover>ul{display:block;}
.menu ul ul{
left: 0;
position: absolute;
top: 50px;
width: 170px;
}
.menu ul ul li{float:none;
border-left: 0px solid #1b1a1a;
border-right: 0px solid #373636;
border-top: 1px solid #1b1a1a;
border-bottom: 1px solid #373636;
position:relative;
}
.menu ul ul li:first-child{border-top:0}
.menu ul ul li:last-child{border-bottom:0}
.menu ul ul li:hover ul{display:block}
.menu ul ul ul{
left: 170px;
position: absolute;
top: 0;
}
.content_box_area{background:#C9C6C5;}
.content_area {
overflow: hidden;
margin: 0 auto;
width: 1000px;
}
.image_box {
overflow: hidden;
}
.image_box {
overflow: hidden;
padding: 45px 0 0;
}
/*another source*/
.view {
margin: 10px;
float: left;
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 {
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.view img {
display: block;
position: relative;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view-fifth 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-fifth .mask {
background-color: rgba(146,96,91,0.3);
-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-fifth h2 {
background: rgba(255, 255, 255, 0.5);
color: #000;
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #333;
-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-fifth:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.view-fifth:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.view-fifth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.view-seventh h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-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-seventh p {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-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-seventh a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-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-seventh:hover img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-seventh:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);
-moz-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view-seventh:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
#keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
#-moz-keyframes bounceY {
0% { -moz-transform: translateY(-205px);}
40% { -moz-transform: translateY(-100px);}
65% { -moz-transform: translateY(-52px);}
82% { -moz-transform: translateY(-25px);}
92% { -moz-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
#-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
40% { -webkit-transform: translateY(-100px);}
65% { -webkit-transform: translateY(-52px);}
82% { -webkit-transform: translateY(-25px);}
92% { -webkit-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/*end*/
.box {
overflow: hidden;
margin: 3px;
}
.box img {
height: 100%;
width: 100%;
}
.box_part_one {
float: left;
overflow: hidden;
width: 450px;
}
.box.box1 {
float: left;
height: 255px;
width: 192px;
}
.box.box2 {
float: left;
height: 130px;
width: 120px;
}
.box.box3 {
float: right;
height: 130px;
width: 120px;
}
.box.box4,.box.box5 {
float: left;
height: 120px;
width: 120px;
}
.box.box5 {position:relative;
overflow:hidden;}
.comment_heading{
background-color: rgba(0, 0, 0, 0.75);
border-radius: 5px;
box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.75);
display: none;
font-size: 15px;
height: 100%;
left: 0;
padding: 25px;
position: absolute;
top: 0;
width: 100%;
}
.box.box5:hover .comment_heading{display:block;}
.box_part_two {
float: right;
width: 550px;
}
.box.box6 {
float: left;
height: 255px;
width: 190px;
}
.box.box7 {
float: left;
height: 120px;
width: 216px;
}
.box.box8 {
float: left;
height: 120px;
width: 126px;
}
.box.box9 {
float: left;
height: 130px;
width: 123px;
}
.box.box10 {
float: right;
height: 130px;
width: 219px;
}
.box.box2:hover img,.box.box9:hover img{
-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box3:hover img{
-webkit-transform: scale(1.4); -webkit-transform-style: preserve-3d; -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box4:hover img{
-webkit-transform: scale(.8); -webkit-transform-style: preserve-3d; -webkit-transform: scale(.8); transform: scale(.8); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box6:hover img{
-webkit-transform: scale(1.4); -webkit-transform-style: preserve-3d; -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.box.box2, .box.box2:hover img,.box.box3:hover img,.box.box4:hover img,.box.box9:hover img,.box.box5:hover .comment_heading {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
my link:
http://www.mytechbd.com/demo-content
How many of your site visitors do you expect to be using IE8?
google, Facebook and a few other high volume website are only supporting the last 3 versions of vendor's browsers and redirect IE8 users to update their webbrowser version...
To provide backward compatibility for the :hover pseudoclass for IE8 you need to use a 'shim' like jquery plugins.
web search or hover shim for IE8
or provide a fallback using the onmouseover event handlers instead of the :hover pseudoclass.
hover shim for IE8 and lower
first of all, here's my code: http://codepen.io/anon/pen/BbklG.
After applying my hover effects, the image link isn't clickable.
How do I make my image clickable while maintaining this hover effect? Thanks!
<div class="view view-sixth">
<img src="http://static.oprah.com/images/200212/omag/200212-omag-ripple-effect-600x411.jpg" border="0">
<div class="mask">
<h2>Image Description</h2>
</div>
</div>
.view {
margin:0 auto;
width: 350px;
height: 230px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 350px;
height: 230px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
font-family: "Lato";
font-weight: 300;
text-transform: uppercase;
color: #fff;
vertical-align: middle;
text-align: center;
position: relative;
font-size: 30px;
}
.view-sixth img {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
pointer-events:none;
background-color: rgba(230,203,226,0.7);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-in 0.1s;
-moz-transition: all 0.3s ease-in 0.1s;
-o-transition: all 0.3s ease-in 0.1s;
-ms-transition: all 0.3s ease-in 0.1s;
transition: all 0.3s ease-in 0.1s;
}
.view-sixth h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-o-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
Wrap your elements in a or simply add this line to your CSS:
.view-sixth .mask {
pointer-events:none;
the reason the image is not clickable is because your "mask" div is covering right over it. You are using absolute positioning to put a block level element over the top of another block element.
I would suggest wrapping the mask div inside the anchor tag with the image see how that works.
<div class="view view-sixth">
<a href="http://www.stackoverflow.com"><img src="http://static.oprah.com/images/200212/omag/200212-omag-ripple-effect-600x411.jpg" border="0">
<div class="mask">
<h2>Image Description</h2>
</div></a>
</div>
You missed a closing div and your closing a tag was in the wrong place works with the above code.