Hello everyone!
Was wondering if I could get some help with my site (a personal project, for fun), specifically hyperlinking to another page through an image. Trouble is, the image is made through CSS and HTML to generate a hover effect. the idea was that an individual could hover over the image, see the destination and click it to find out more by directing them to a new page. However I am completely inept at CSS and HTML so Im completely lost on how to do this and dont even know where I could search for advice, so I figured I could start here.
Here is a link to to the page in question: https://vroengardair.weebly.com/asia.html
And here is the code that I'm using:
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway);
.snip1584 {
font-family: 'Raleway', sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
font-size: 16px;
text-align: left;
}
.snip1584 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1584:before {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
top: 100%;
content: '';
background-color: rgba(61, 61, 61, 0.9);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.snip1584 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1584 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.snip1584 h3,
.snip1584 h5 {
margin: 0;
opacity: 0;
letter-spacing: 1px;
}
.snip1584 h3 {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
text-transform: uppercase;
font-weight: 400;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
margin-bottom: 5px;
}
.snip1584 h5 {
font-weight: normal;
background-color: #ae895d;
padding: 3px 10px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.snip1584 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1584:hover:before,
.snip1584.hover:before {
top: 10px;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.snip1584:hover h3,
.snip1584.hover h3,
.snip1584:hover h5,
.snip1584.hover h5 {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.snip1584:hover h3,
.snip1584.hover h3 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.snip1584:hover h5,
.snip1584.hover h5 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/* Demo purposes only */
body {
background-color: #FFFFFF;
text-align: center;
}
</style>
<figure class="snip1584"><img src="https://i.imgur.com/mbzdR94.jpg" alt="sample87"/>
<figcaption>
<h3>Tokyo</h3>
</figcaption><a href="#"></a>
</figure>
<figure class="snip1584"><img src="https://i.imgur.com/an9x12y.jpg" alt="sample119"/>
<figcaption>
<h3>Shanghai</h3>
</figcaption><a href="#"></a>
</figure>
<figure class="snip1584"><img src="https://i.imgur.com/87Z2a0m.jpg" alt="sample120"/>
<figcaption>
<h3>Beijing</h3>
</figcaption><a href="#"></a>
</figure>
Thanks in advance!
