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

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

javascriptjqueryhtmlcss

Ways to align text in the middle and shift it downward?

I'm currently attempting to center the bottom navigation bar using the following CSS code: #main-nav { margin-left: auto; margin-right: auto;} Unfortunately, this method is not achieving the desired result. I even tried adding <center></cen ...

htmlcssalignmentblockcenter

Angular 2/4: Struggling to refresh child component's view

I need assistance with updating the value of "str" in the child component's view from the parent component. I want to do this by calling the "change()" function in the child component. Here is my code: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Enable access to the child of Lages and apply CSS to disable it

My current code looks something like this: <label for="billing:postcode" class="required"><em>*</em>Zip/Postal Code</label> I am looking to hide the <em> element from displaying using CSS. How can I achieve this with the dis ...

htmlcssparent-child

The art of sketching precise lines encircling a circular shape through the

What is the best way to use a for loop in JavaScript to draw lines around a circle, similar to those on a clock face? ...

javascripthtmlcanvas

Ben Kamens has developed a new feature in jQuery Menu Aim where the sub menu will not reappear once it

While exploring Ben Kemens’ jquery-menu-aim, I came across a demonstration on codepen. The code on codepen allows smooth transition from the main menu to the sub menu, but if you move away completely, the submenu remains visible and doesn't disappe ...

javascriptjqueryhtmlmenu

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

Arrange data into columns on a website

In my project, I'm exploring the challenge of creating a square 2 x 2 grid alongside a rectangular column on the right-hand side. While attempting to implement a grid system for the 2 x 2 layout, I encountered issues with the alignment of the rectang ...

htmlcsscss-grid

Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...

jquerycsszurb-foundationzurb-foundation-6

Position divs to align text beside icons

I am currently working on a Bootstrap popover to display various pieces of information, each containing an icon and some text. Additionally, I am incorporating twig into this project. Here is the HTML structure: <span class="fa fa-user instructor-con ...

htmlcsstwig

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

javascripthtmlreactjsreact-hooks

Having trouble with PHPmailer resulting in a 504 gateway timeout error

I keep receiving a 504 gateway timeout error from my server when using phpmyadmin to individually send emails to a list of approximately 1200 users. It is crucial for me that the emails are sent out one by one, as I want to avoid exposing any email addres ...

phphtmlphpmailer

How can I apply a border to individual table cells in HTML without affecting the entire table?

Struggling to apply a border on table cells, especially when using rowspan. Desiring a table layout with 4 cells - one large cell on the left and three smaller cells on the right side of it. Below is the code snippet I attempted: jsfiddle[dot]net/1fv4dz ...

htmlcsshtml-table

Why does the for loop function correctly with console.log but not with innerHTML?

Hello! I'm completely new to JavaScript, so please excuse any oversight... Below is the code that runs when a button on the page is clicked: function getNumbers() { var firstValue = document.getElementById("time_one").value; var ...

javascripthtmlfor-loopinnerhtmlconsole.log

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

I'm attempting to modify a bootstrap 3 dropdown button to fully utilize the width properties of .btn-block class. It appears that the dropdown button does not respond in the same way as regular buttons. Below is my current code: <div class="row"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

javascripthtmlangularjsangularjs-materialmd-select

Modifying color scheme in ASP.NET web application's table

Although I'm not very familiar with this, I'll try to help out. I have an ASP.Net MVC web app in Visual Studio where one of my views, called View Details, contains a table that displays colors based on a specific scale. This scale consists of onl ...

htmlasp.net-mvccolorshtml-table

Uploading images using the Drag and Drop feature in HTML

Hello, I'm having an issue with the drag and drop functionality. I want to expand the size of the input to cover the entire parent div, but for some reason, the input is appearing below the drag and drop div. Can anyone assist me with this? https://i. ...

javascriptjqueryhtmlcss

Tips for organizing dynamic table data following an append operation

Hey there! I'm currently working on a project involving sorting students after applying filters. Once the students have been filtered, I need to append classes and text to buttons as shown in the image below: https://i.stack.imgur.com/c9Mtm.png The HT ...

javascriptphpjqueryhtmltablesorter