Make an image to open a bigger copy on other location-CodePudding

I'm trying to make an image to open on another location on the page while its been hovered. I looked online but didn't find a way to do that functionallty usuing only html and css. Anyone know how to achive that?

Not hovered:

Hovered:

I tried to make another copy of the image transpert on defined area on a grid but it can't sit on top of the text.

html code:

 <section id="fav-place" >
                <article >

                    <div >
                        <h1>A place I Enjoyed visiting</h1>
                        <h2 >Cape Greco, Cyprus</h2>
                        <p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
                             According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
                        </p>
                        
                        <p>
                            In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving. 
                            Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
                             These caves, along with Smugglers caves, are accessible only by the sea.
                        </p>
                    </div>
                    

                    <div >
                        <h2>Why I like this place</h2>
                        <p>Because of the clear water, the cliffs around and the beautiful sights</p>
                    </div>
                </article>

                <aside >
                    <img  src="/images/cape-greco-imgs/boat.jpg" alt="boat-img">                
                    <img  src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-img">                   
                    <img  src="/images/cape-greco-imgs/cave.jpg" alt="cave-img">                   
                    <img  src="/images/cape-greco-imgs/hole.jpg" alt="hole-img">
                    <img  src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-img">
                    <img  src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-img">
                    <img  src="/images/cape-greco-imgs/tree.jpg" alt="tree-img">
                    
                </aside>    
            </section>

css code:

.place-art {
    grid-column: 1/2;
    display: grid;
    grid-template-rows: 3fr 1fr;
}

.place-desc-sec{
    grid-row: 1/-2;
}


.place-aside {
    border: solid 0.5vh;
    border-color: rgba(185, 218, 100, 0.862);
    border-radius: 1vh;
    margin-top: 6vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.place-sec {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.first-last-img {
    margin: 0;
}

.p-sm-img {
    margin: 0.2vh 0;
    width: 23.5vw;
    
}


.p-sm-img:hover {
    
    
}

.p-lrg-img {
    visibility: hidden;
    opacity: 0.2;
    grid-row: 1/-2;
    grid-column: 1/2;
}

.why-i-like-place {
    grid-row: 2/3;
    grid-column: 1/2
    
}

CodePudding user response：

Heres the code!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>website</title>
</head>
<body>
    <section id="fav-place" >
        <article >
    
            <div >
                <h1>A place I Enjoyed visiting</h1>
                <h2 >Cape Greco, Cyprus</h2>
                <p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
                     According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
                </p>
                
                <p>
                    In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving. 
                    Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
                     These caves, along with Smugglers caves, are accessible only by the sea.
                </p>
            </div>
            
    
            <div >
                <h2>Why I like this place</h2>
                <p>Because of the clear water, the cliffs around and the beautiful sights</p>
            </div>
        </article>

        <img id="bigImg">
    
        <aside >
            <img onm ouseover=""  src="/images/5f80f09d-6657-41af-a56c-bb2970718dfb.jpg" alt="boat-img">                
            <img  src="/images/adobestock_162537886.jpeg" alt="bridge-img">                   
            <img  src="/images/bg6.jpg" alt="cave-img">                   
            <img  src="/images/city-buildings-sunset-clouds-wallpaper-preview.jpg" alt="hole-img">
            <img  src="/images/helianthus-yellow-flower-pixabay_11863.jpg cliff.jpg" alt="sm-cliff-img">
            <img  src="/images/image_large.jpg" alt="sunrise-img">
            <img  src="/images/photo-1448375240586-882707db888b.jpg" alt="tree-img">
            
        </aside>    
    </section>
    <script src="app.js"></script>
</body>
</html>

.place-art {
    grid-column: 1/2;
    display: grid;
    grid-template-rows: 3fr 1fr;
}

.place-desc-sec{
    grid-row: 1/-2;
}


.place-aside {
    border: solid 0.5vh;
    border-color: rgba(185, 218, 100, 0.862);
    border-radius: 1vh;
    margin-top: 6vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.place-sec {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.first-last-img {
    margin: 0;
}

.p-sm-img {
    margin: 0.2vh 0;
    width: 23.5vw;
    
}


#bigImg {
    max-width: 500px;
    position: fixed;
    right: 0;
    top: 0;
}

.p-lrg-img {
    visibility: hidden;
    opacity: 0.2;
    grid-row: 1/-2;
    grid-column: 1/2;
}

.why-i-like-place {
    grid-row: 2/3;
    grid-column: 1/2
    
}

a = document.querySelectorAll(".p-sm-img");
for (i in a) {
  a[i].onmouseover = function (e) {
    document.querySelector("#bigImg").src = this.src;
  };
}

CodePudding user response：

I hope open in a lightbox view help you in this case

function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex  = n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i  ) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i  ) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className  = " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<div >
  <div >
    <img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" >
  </div>
  <div >
    <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA==&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" >
  </div>
  
  
  
<div >
  <div >
    <img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" >
  </div>
  <div >
    <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA==&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" >
  </div>

</div>

<div id="myModal" >
  <span  onclick="closeModal()">&times;</span>
  <div >

    <div >
      <div >1 / 4</div>
      <img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%">
    </div>

    <div >
      <div >2 / 4</div>
      <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA==&w=1000&q=80" style="width:100%">
    </div>

    <div >
      <div >3 / 4</div>
      <img src="img_mountains_wide.jpg" style="width:100%">
    </div>
    
    <div >
      <div >4 / 4</div>
      <img src="img_lights_wide.jpg" style="width:100%">
    </div>
    
    <a  onclick="plusSlides(-1)">&#10094;</a>
    <a  onclick="plusSlides(1)">&#10095;</a>

    <div >
      <p id="caption"></p>
    </div>


    <div >
      <img  src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div >
      <img  src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div >
      <img  src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div >
      <img  src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

</div>