Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect?

Image not hovered: https://i.stack.imgur.com/GweOk.png

Image hovered: https://i.stack.imgur.com/6cRjK.png

I attempted to create a transparent duplicate of the image placed in a defined grid area, but it wouldn't sit on top of the text.

HTML code:

<section id="fav-place" class="place-sec">
                <article class="place-art">

                    <div class="place-desc">
                        <h1>A place I Enjoyed visiting</h1>
                        <h2 class="sec-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 class="why-i-like-place">
                        <h2>Why I like this place</h2>
                        <p>Because of the clear water, the cliffs around, and the beautiful sights</p>
                    </div>
                </article>

                <aside class="place-aside">
                    <img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/boat.jpg" alt="boat-img">                
                    <img class="p-sm-img" src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-img">                   
                    <img class="p-sm-img" src="/images/cape-greco-imgs/cave.jpg" alt="cave-img">                   
                    <img class="p-sm-img" src="/images/cape-greco-imgs/hole.jpg" alt="hole-img">
                    <img class="p-sm-img" src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-img">
                    <img class="p-sm-img" src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-img">
                    <img class="p-sm-img first-last-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
    
}
htmlcssimagehover

Answer №1

Check out the following HTML and CSS code snippets!

<!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" class="place-sec">
        <article class="place-art">

            <div class="place-desc">
                <h1>A place I Enjoyed visiting</h1>
                <h2 class="sec-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 class="why-i-like-place">
                <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 class="place-aside">
            <img onmouseover="" class="p-sm-img first-last-img" src="/images/5f80f09d-6657-41af-a56c-bb2970718dfb.jpg" alt="boat-img">                
            <img class="p-sm-img" src="/images/adobestock_162537886.jpeg" alt="bridge-img">                   
            <img class="p-sm-img" src="/images/bg6.jpg" alt="cave-img">                   
            <img class="p-sm-img" src="/images/city-buildings-sunset-clouds-wallpaper-preview.jpg" alt="hole-img">
            <img class="p-sm-img" src="/images/helianthus-yellow-flower-pixabay_11863.jpg cliff.jpg" alt="sm-cliff-img">
            <img class="p-sm-img" src="/images/image_large.jpg" alt="sunrise-img">
            <img class="p-sm-img first-last-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;
  };
}

Answer №2

If opening in a lightbox view could assist you in this scenario

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

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

var index = 1;
showImages(index);

function adjustSlides(n) {
  showImages(index += n);
}

function selectSlide(n) {
  showImages(index = n);
}

function showImages(n) {
  var j;
  var pics = document.getElementsByClassName("myPhotos");
  var pointers = document.getElementsByClassName("demos");
  var textDescription = document.getElementById("description");
  if (n > pics.length) {index = 1}
  if (n < 1) {index = pics.length}
  for (j = 0; j < pics.length; j++) {
      pics[j].style.display = "none";
  }
  for (j = 0; j < pointers.length; j++) {
      pointers[j].className = pointers[j].className.replace(" active", "");
  }
  pics[index-1].style.display = "block";
  pointers[index-1].className += " active";
  textDescription.innerHTML = pointers[index-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;
}

.myPhotos {
  display: none;
}

.cursor {
  cursor: pointer;
}

.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;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.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;
}

.demos {
  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 class="row">
  <div class="column">
    <img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="displayModal();selectSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>

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

</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="hideModal()">&times;</span>
  <div class="modal-content">

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

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

    <a class="prev" onclick="adjustSlides(-1)">&#10094;</a>
    <a class="next" onclick="adjustSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="description"></p>
    </div>

    <div class="column">
      <img class="demos cursor" src="img_nature_wide.jpg" style="width:100%" onclick="selectSlide(1)" alt="Nature and sun rising">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="selectSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="selectSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="selectSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing Canvas with a JPEG layer using the Caman library

I'm currently working with the Caman library to manipulate an image. My goal is to overlay a jpeg onto the manipulated image, but I'm facing a challenge. Although I can briefly see the jpeg beneath the manipulated image, it quickly gets overlai ...

htmlcanvashtml5-canvascamanjs

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

javascripthtmljqueryjquery-events

The RequiredFieldValidator and RegularExpressionValidator are not functioning properly

I have the following code snippet in one of my "C#" aspx pages. Despite having validation set up, the event attached to cmdPassword still fires even when the textbox is empty. Why are the validations not working? <tr> <td align="left" valign="t ...

c#htmlasp.netvalidation

Determining when all textures have successfully loaded in Three.js and ensuring there are no lingering black rectangles

I'm currently developing a web platform that allows users to customize and preview 3D house models. If the user's browser doesn't support WebGL, the server renders the house and sends screenshots to the client. However, if the screenshots ar ...

javascripthtmlcanvasopengl-esthree.js

Creating Functional Tabs Using CSS and JavaScript

I've been experimenting with this code snippet, trying to get it to work better. It's still a work in progress as I'm new to this and have only customized it for my phone so far. The issue can be seen by clicking on the Projects and Today ta ...

javascriptjqueryhtmlcss

Tips for making markers act responsively

Recently, I put together a collection of rain radar images that can quickly show whether rain is on the way or not. As you resize the URL window, the two pictures positioned side by side will also shrink. For an illustration, check it out here ... Each p ...

htmlcssmarker

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

javascriptjquerycss

CSS mismatch detected between production and development modes

Currently, I am utilizing the Vuetify framework coupled with custom CSS for a project developed using a webpack template. During development mode, my custom CSS modifications are successfully applied to HTML elements; however, in Production mode, these cha ...

cssvue.jswebpackproduction

The functionality of Selection.modify is unfortunately limited when it comes to input and textarea elements in Firefox

Check out this demonstration (jsfiddle link): const input = document.querySelector('#input'); const textarea = document.querySelector('#textarea'); const div = document.querySelector('div'); const x = (e) => { if (e.ke ...

javascripthtmlfirefox

Utilizing the `repeat` function within `grid-template-areas` eliminates the need to manually repeat grid cell

When working with grid-template-areas in CSS grid, I encountered a situation where I wanted a header to span the entire width. Instead of defining the template-grid-columns with repeat(12, 1fr), I was searching for a way to utilize repeat() so that I would ...

htmlcsscss-grid

Determining the aspect ratio of an image is essential in using flexbox to achieve consistent heights

Recently, I came across a fascinating code pen titled: this demonstration of equal responsive height images I am determined to make sure that all images have the same height, regardless of their width/height variances. The CSS displayed below utilizes fle ...

htmlcssimageflexbox

Optimal practices for localization

Looking to translate our site into multiple languages starting with one language but planning for more in the future. Considering the most effective way to accomplish this. The plan is to use subdirectories to organize the html files, with shared files su ...

phphtml

Adjust speed on various HTML5 video players

I'm looking to slow down all the HTML5 video players on my page to 0.5x speed. Currently, I have a JavaScript snippet that only affects one video player at a time. <script type="text/javascript"> /* play video twice as fast */ document.quer ...

javascripthtmlvideohtml5-videoplayback

What is the appropriate method for passing parameters in PHP and how can you handle returned empty values

I'm looking to pass parameters in the action method because I am unable to do so via the header. <form name="mailinglist1" method="post" action="report1.php" > In this form, I'm using a download button to connect my report (HTML). ...

phphtmlcodeigniter

How can I create a clickable <div> element containing multiple links and trigger only one action?

Within my code, there is a <div> element that has been made clickable. Upon clicking this <div>, the height and text expand using the jQuery function $(div).animate();. While this functionality works as intended, I am encountering a slight issu ...

javascriptjqueryhtmlcssasp.net-mvc

Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.ph ...

csswordpress

Issue with Material UI React: Navbar does not properly align the box to the right side

I'm facing an issue with my navbar that is supposed to align all the page options to the right. Despite using a flexbox layout and trying different alignment properties like alignSelf: end, the text only moves slightly downwards instead of aligning pr ...

htmlcssreactjsmaterial-ui

How to incorporate an SVG line between two divs within a flexbox arrangement

<div class='container'> <div class='Greeting'> Hello there this is B </div> <div class='banana'> Hello B </div> </div> .container{ display: flex; width: 100%; ...

htmlcssreactjs

Achieve button highlighting by hovering over the card - Bootstrap 5

Is there a way to make a button focus when hovering over a card in Bootstrap from any place on the card? Currently, the button only focuses when directly hovered over. I want to achieve the effect shown in the second image after hovering over any part of t ...

htmlcsstwitter-bootstrapbootstrap-5

JavaScript isn't functioning properly after UserControl is loaded via Ajax

Thank you, Stilgar for helping me solve my issue. I created a javascript file and placed all my code in it. After adding this file to the UserControl and retrieving the UserControl's html, I used $("#DivID").html(UserControlHTML). Now everything is wo ...

javascriptasp.nethtmlajax