Так и не разобрался видимо пока знаний и не хватать, решил сам написать, и получилось на половину.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=script, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
a{
color: #000;
text-decoration: none;
}
a:hover{
color: cornflowerblue;
text-decoration: underline;
}
.blok{
margin: 640px auto 640px;
max-width: 720px;
}
.zagalovok{
font: 2rem/0rem
}
.tekst{
font: 1rem/1rem
}
.shriht{
position: relative;
margin: 0px 0px 5px 0px;
width: 280px;
/* text-align: center; */
}
.kartinka_pri_navedenii{
position: absolute;
top: 0px;
left: 280px;
border: 10px solid #2e2e2e;
box-sizing: border-box;
line-height: 0px;
opacity: 0;
transition: opacity .2s;
}
</style>
</head>
<body>
<div class="blok">
<div class="shriht">
<a href="03_ubuntu_didact_gothic/" target="_blank">Ubuntu & Didact Gothic</a>
</div>
<div class="shriht">
<a href="04_spectral_source_sans_pro/" target="_blank">Spectral & Source Sans Pro</a>
</div>
<div class="shriht">
<a href="05_source_sans_pro_source_serif_pro/" target="_blank">Source Sans Pro & Source Serif Pro</a>
</div>
<div class="shriht">
<a href="06_rubik_rubik/" target="_blank">Rubik & Rubik</a>
</div>
<div class="shriht">
<a href="07_roboto_slab_roboto/" target="_blank">Roboto & Roboto Slab</a>
</div>
<div class="shriht">
<a href="08_roboto_slab_open_sans/" target="_blank">Roboto Slab & Open Sans</a>
</div>
<div class="shriht">
<a href="09_roboto_nunito/" target="_blank">Roboto Slab & Nunito</a>
</div>
<div class="shriht">
<a href="10_raleway_merriweather/" target="_blank">Raleway & Merriweather</a>
</div>
<div class="shriht" id="navedenie">
<a href="11_raleway/" target="_blank">Raleway & Raleway</a>
<div class="kartinka_pri_navedenii">
<img src="https://rakipov.ru/files/11.png" alt="">
</div>
</div>
<div class="shriht">
<a href="12_pt_serif_open_sans/" target="_blank">PT Serif & Open Sans</a>
</div>
<div class="shriht">
<a href="13_pt_sans_pt_serif/" target="_blank">PT sans & PT serif</a>
</div>
<div class="shriht">
<a href="14_pt_sans_didact_gothic/" target="_blank">PT sans & Didact Gothic</a>
</div>
<div class="shriht">
<a href="15_playfair_display_open_sans/" target="_blank">Playfair Display & Open Sans</a>
</div>
<div class="shriht">
<a href="16_playfair_display_alice/" target="_blank">Playfair Display & Alice</a>
</div>
</div>
<script>
"use_strict"
const navedenie = document.querySelector("#navedenie");
const kartinkaPriNavedenii = document.querySelector(".kartinka_pri_navedenii");
function priNavedenii_1() {
let navedenie = document.querySelector("#navedenie");
let test = navedenie.getBoundingClientRect();
console.log(test.top);
function priNavedenii_2() {
if (test.top >= 387) {
kartinkaPriNavedenii.style.opacity = "1";
kartinkaPriNavedenii.style.top = "-387" + "px";
} else if (test.top >= 0) {
kartinkaPriNavedenii.style.opacity = "1";
kartinkaPriNavedenii.style.top = "0" + "px";
}
}
navedenie.addEventListener("mouseover", priNavedenii_2);
}
window.addEventListener('scroll', priNavedenii_1);
function priNavedenii_3(){
kartinkaPriNavedenii.style.opacity = "0";
}
navedenie.addEventListener("mouseout", priNavedenii_3);
</script>
</body>
</html>
И у меня сейчас сделано для одного блока, а их будет штук 50 как написать код для них всех, и функция логично начинает работать после скрола, а как сделать что бы даже если не был скрола она работала.
Нужно навестись на
Raleway & Raleway
и она будет работать если есть место то покажет картинку сверху, если нет то снизу.