-3
У меня возникли проблемы со ссылками. Я попытался сделать крутой эффект зависания на моих изображениях, но не смог выбрать ссылку. Obviosuly проблема где-то в части перехода css ... Я думаю, что наложение «убивает» это, но я не эксперт. Благодарим вас за все ваши предчувствия заранее.Hovers не позволяют мне сделать ссылку
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;
}
Все нам нужно ** минимальное ** демо ... достаточно, чтобы продемонстрировать всю проблему ... не всю страницу. –
http://www.matictoni.com/projects.html –