Matic Toni Matic Toni - 3 months ago 9
CSS Question

Hovers don't allow me to make a link

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> <a href="projects.html">PROJECTS</a> <a href="About.html" class="transition">ABOUT</a> <a href="Contact.html" class="transition">CONTACT</a>
</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;
}

Answer

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 :)