Is it possible to show <img src= > on hover ?

vmars316 · October 19, 2021

Hello ,

I see this code

Couldn't get the Code "< >" working so I'll try Quote .

Here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_display_element_hover

Quote

I see this code

<!DOCTYPE html>
<html>
<head>
<style>
.hide {
display: none;
}

.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
</head>
<body>

<h2>Display an Element on Hover</h2>

<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>

</body>
</html>

Is it possible to show img src= on hover ?

Thanks

Ingolme · October 20, 2021

You're allowed to put an <img> tag inside the <div class="hide"> element.

vmars316 · October 20, 2021

Thanks ,

Yes , I see that . I have written a program that builds a very simple webpage of all images in a Folder .

It looks like this

Quote

<!DOCTYPE HTML>
<head>
<title>Media2html.html vmars.us/freeware</title>
<meta name="Generator" content="PureBasic">
<meta name="Description" content="...Created by Media2html.exe % PureBasic...">
<style type="text/css">
img {
max-width: 400px;
height: 200px;
}
</style>
</head>
<body text="#000000" style="text-align:left;">
<h4>To view images individually , Right_Click on image , then on pop-up window , Left_Click on "Open in new Tab" . </h4>
<br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204 - Copy.bmp" alt="" >2016-10-15_185204 - Copy.bmp<br><br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204.bmp" alt="" >2016-10-15_185204.bmp<br><br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Large.png" alt="" >Media2Html-ScreenImage-Large.png<br><br>
<img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Small.png" alt="" >Media2Html-ScreenImage-Small.png<br><br>

There is a program option to stack images vertically (as above) or display images horizontally .

Is there a way to 'show img src= on hover' without using <div> ?

<div> would destroy page formatting .

Thanks

Ingolme · October 20, 2021

If you don't want the <div> to have an effect on the page flow, you can make it an inline element instead of a block using CSS.

.myDIV:hover + .hide {
  display: inline;
  color: red;
}

vmars316 · October 20, 2021

Thanks ,

The hover is working , but the display: inline; is not working .

Any idea why ?

Quote

<!DOCTYPE HTML>
<head>
<title>Media2html.html vmars.us/freeware</title>
<meta name="Generator" content="PureBasic">
<meta name="Description" content="...Created by Media2html.exe % PureBasic...">
<style type="text/css">
img {
max-width: 400px;
height: 200px;
}

.hide {
display: none;
}

.myDIV:hover + .hide {
display: inline;
color: red;
}
</style>
</head>
<body text="#000000" style="text-align:left;">
<h4>To view images individually , Right_Click on image , then on pop-up window , Left_Click on "Open in new Tab" . </h4>
<br>

<div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div>

<div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div>

<div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div>
<div class="myDIV"><img src="C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png" alt=""/>
</div>
<div class="hide">C:\Users\vmars\OneDrive\Documents\oCam\ExperimentalKnowledge\Capture_2021_10_15_11_43_54_205.png</div>

</body></html>

Thanks

Ingolme · October 20, 2021

The divs with class "myDIV" are still being displayed as blocks. You need to make those into inline elements as well.

vmars316 · October 22, 2021

Thanks ,

The images code is working great , but audio and video are not showing the <div class="hideDiv"> code .

Any ideas ?

Quote

<!DOCTYPE HTML>
<head>
<title>Media2html.html vmars.us/freeware</title>
<meta name="Generator" content="PureBasic">
<meta name="Description" content="...Created by Media2html.exe % PureBasic...">
<style type="text/css">

img {
max-width: 20%;
height: 20%;
}

.hideDiv {
display: none;
}

.showDiv:hover + .hideDiv {
display: inline;
color: red;
}
</style>
</head>
<body text="#000000" style="text-align:left;">
<h4>To view images individually , Right_Click on image , then on pop-up window , Left_Click on "Open in new Tab" . </h4>
<br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204 - Copy.bmp" alt="" ></div><div class="hideDiv">2016-10-15_185204 - Copy.bmp</div><br><br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\2016-10-15_185204.bmp" alt="" ></div><div class="hideDiv">2016-10-15_185204.bmp</div><br><br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Large.png" alt="" ></div><div class="hideDiv">Media2Html-ScreenImage-Large.png</div><br><br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\Media2Html-ScreenImage-Small.png" alt="" ></div><div class="hideDiv">Media2Html-ScreenImage-Small.png</div><br><br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\pimClip-ScreenShot.png" alt="" ></div><div class="hideDiv">pimClip-ScreenShot.png</div><br><br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\pimClip-TopicsListScreen.jpg" alt="" ></div><div class="hideDiv">pimClip-TopicsListScreen.jpg</div><br><br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\SocialSharing.jpeg" alt="" ></div><div class="hideDiv">SocialSharing.jpeg</div><br><br>
<div class="showDiv" style="display: inline"><img src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\vmars.us.ico" alt="" ></div><div class="hideDiv">vmars.us.ico</div><br><br>
<div class="showDiv" style="display: inline"><audio controls ><source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\testBeep.mp3" type="audio/mpeg" > Your browser does not support the audio tag. </audio><div class="hideDiv">testBeep.mp3</div><br><br>
<div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\FriendsOnFaceBook.mp4" type="video/mp4" > Your browser does not support the video tag.</video><div class="hideDiv">FriendsOnFaceBook.mp4</div><br><br>
<div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\FriendsOnFaceBook.ogv" type="video/ogv" > Your browser does not support the video tag.</video><div class="hideDiv">FriendsOnFaceBook.ogv</div><br><br>
<div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\JustinGuitar-HeyHey.mp4" type="video/mp4" > Your browser does not support the video tag.</video><div class="hideDiv">JustinGuitar-HeyHey.mp4</div><br><br>
<div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\JustinGuitar-HeyHey.ogv" type="video/ogv" > Your browser does not support the video tag.</video><div class="hideDiv">JustinGuitar-HeyHey.ogv</div><br><br>
<div class="showDiv" style="display: inline"><video width="320" height="200" controls> <source src="C:\PureBasic-myApps\vmProjects\BUTTONS\BUTTONS-Media2html\NotYourAverage-HorseRace.mp4" type="video/mp4" > Your browser does not support the video tag.</video><div class="hideDiv">NotYourAverage-HorseRace.mp4</div><br><br>
</body></html></body></html>

dsonesuk · October 22, 2021

<!DOCTYPE html>
<html>
    <head>
        <style>
            .showdiv-wrap {display: inline-flex; align-items: start;justify-content: flex-start;flex-flow: row; position: relative;flex: 1 1 auto;}
            .showDiv { display:flex; align-items: center;justify-content: center; flex: 1 1 auto; margin:1em;}
            .showDiv:hover::before {
                content: " (" attr(data-mediasrc) ")";
                background: red;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <h1>The content Property</h1>
        <p>The content property is used to insert generated content.</p>

        <p>Look at our:</p>
        <p>
            <a href="https://www.w3schools.com/css/">CSS Tutorial</a><br>
            <a href="https://www.w3schools.com/cssref/">CSS Reference</a>
        </p>
        <div class="showdiv-wrap">
            <p class="showDiv">
                <img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket" width="300" height="400">
            </p>
            <p class="showDiv">
                <img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket" width="300" height="400">
            </p>
        </div>
        <script>
            var vFindImgParent = document.querySelectorAll(".showDiv");

            console.log(vFindImgParent.length);
            for (i = 0; i < vFindImgParent.length; i++) {
                var vParentImage = vFindImgParent[i].querySelector("img").src;
                var vFilename = vParentImage.split('/').pop();
                console.log(vFilename);
                vFindImgParent[i].setAttribute("data-mediasrc", vFilename);


            }
        </script>

    </body>
</html>

vmars316 · October 28, 2021

Thanks dsonesuk ,

I am still working this thru .

Sign In

Is it possible to show <img src= > on hover ?

Recommended Posts

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity