制作图像以在其他位置打开更大的副本答案

【问题标题】：Make an image to open a bigger copy on other location制作图像以在其他位置打开更大的副本
【发布时间】：2022-11-13 03:48:06
【问题描述】：

我正在尝试制作一张图片，以便在鼠标悬停时在页面上的另一个位置打开。我在网上查看，但没有找到仅使用 html 和 css 来实现该功能的方法。任何人都知道如何实现这一目标？

未悬停：

悬停：

我试图在网格上的定义区域上制作另一个透明图像副本，但它不能位于文本之上。

html代码：

 <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代码：

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

【问题讨论】：

标签： html css image hover

【解决方案1】：

这是代码！

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

【讨论】：