Как сделать фоновое изображение в сетке кликабельным?

У меня есть сетка изображений как мой домашний экран с текстом, наложенным на них. Он находится в сетке с минимальным требованием к высоте для строк, но не имеет максимума. Столбцы представляют собой лишь часть размера экрана, поэтому они не имеют заданной ширины. Вот где я застрял, как мне сделать их связанными, не зная их размера? Спасибо!

HTML

<div class="grid">

<div class="f f1" href="me">
<div class="t">
<h3>Scum Fuck Flower Boy</h3>
<p>Tyler the Creator</p>
</div>
</div>

<div class="f f2">
<div class="t">
<h3>No Dope on Sundays</h3>
<p>CyHi da Prynce</p>
</div>
</div>

<div class="f f3">
<div class="t">
<h3>The Life of Pablo</h3>
<p>Kanye West</p>
</div>
</div>

<div class="f f4">
<div class="t">
<h3>Kanye and Kim have a kid</h3>
</div>
</div>

<div class="f f5">
<div class="t">
<h3>My Beatutiful Dark Twisted Fantasy</h3>
<p>Kanye West</p>
</div>
</div>

</div>

CSS

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
margin: 30px 150px 30px 150px;
position: relative;
}

.f {
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}

.t {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
margin-bottom: 10px;
}

.t h3 {
color: white;
position: relative;
font-size: 2rem;
font-weight: 500;
font-style: bold;
padding-left: 15px;
}

.t p {
color: white;
position: relative;
font-size: 1.2rem;
font-weight: 400;
padding-left: 15px;
}

.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("/images/album/tyler.jpg");
}

.f2 {
grid-column: 3/4;
grid-row: 1/2;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("/images/album/dope.jpg");

}

.f3 {
grid-column: 3/4;
grid-row: 2/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("/images/album/kanye.jpg");

}

.f4 {
grid-column: 1/2;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("/images/album/selfie.jpg");

}

.f5 {
grid-column: 2/3;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("/images/album/fantasy.jpg");

}

0

Решение

Чисто CSS HTML-метод заключается в добавлении элемента привязки обложки:

<div class="f f1">
<div class="t">
<h3>Scummy Flower Boy</h3>
<p>Tyler the Creator</p>
</div>
<a class="overclick" href="/url/to/go/somewhere">Some google happy text</a>
</div>

Добавьте это к классу .f, чтобы дать ему основу:

.f {
...
position: relative;/* shouldn't affect your grid */
}

И тогда специальный CSS для якоря будет просто:

a.overclick {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
opacity: 0;
text-indent: -999em;/* to hide its text from humans, but google is still happy */
}
a.overclick:hover {
/* this just lightly fades when you hover, can be excluded */
background-color: #fff;
opacity: 0.12;
}

Это создает элемент ссылки привязки, который «заполняет» каждый элемент f div, поэтому, когда вы нажимаете на него, он куда-то уходит. Но вы не видите это визуально, это просто там. Мы использовали это на некоторых сайтах, которые не хотят, чтобы JavaScript обрабатывал события кликов таким способом.


Теперь метод javascript, использующий метод jQuery. Добавьте это к своим divам класса f:

<div class="f f1" goto="/url/to/somewhere">
...
</div>

И тогда блок скрипта:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$(".f").click(function(e){
window.location = $(this).attr('goto');
});
});
</script>
1

Другие решения

Самый простой способ без JS — это что-то вроде этого:

<a href="https://google.com/" target="_blank"><img src="https://res.cloudinary.com/sekenikola/image/upload/v1505839813/Rost%20studio/portfolio/08.png" alt=""></a>

используйте target = «_ blank», чтобы открыть в новом окне, или target = «_ self», чтобы открыть в том же окне

0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector