logo
down
shadow

How to hover picture


How to hover picture

By : ajith
Date : November 22 2020, 10:54 AM
Any of those help chack the answer of Alois Mahdal from here
code :
<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />


Share : facebook icon twitter icon
li hover/onmouseover changes a picture

li hover/onmouseover changes a picture


By : user3474767
Date : March 29 2020, 07:55 AM
hope this fix your issue I have been asked to make a change to our website (it uses asp [about which I know nothing]), a solution based on css and javascript would be easier for me. , Given the following HTML:
code :
<ul>
    <li>Some text</li>
    <li>Some text</li>
</ul>

<img src="http://davidrhysthomas.co.uk/playtime/img/dwLogoS.png" id="graphic" />
var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
for (i=0; i<lis.length; i++){
    lis[i].onmouseover = function(){
        graphic.src = "http://davidrhysthomas.co.uk/linked/astrid_avatar.png";
    };
    lis[i].onmouseout = function(){
        graphic.src = originalGraphic;
    };
}
var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
for (i=0; i<lis.length; i++){
    lis[i].onmouseover = function(){
        graphic.src = "http://example.com/path/to/images/" + i + ".png";
        // this generates image sources of the form:
        // http://example.com/path/to/images/1.png
        // http://example.com/path/to/images/2.png
        // ...and so forth
    };
    lis[i].onmouseout = function(){
        graphic.src = originalGraphic;
    };
}
var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
var images = [
    "http://davidrhysthomas.co.uk/linked/astrid_avatar.png",
    "http://davidrhysthomas.co.uk/img/dexter.png"
    ];
for (i=0; i<lis.length; i++){
    lis[i].setAttribute('data-altimage',images[i]);
    lis[i].onmouseover = function(){
        graphic.src = this.getAttribute('data-altimage');
    };
    lis[i].onmouseout = function(){
        graphic.src = originalGraphic;
    };
}
var lis = document.getElementsByTagName('li');
var graphic = document.getElementById('graphic');
var originalGraphic = graphic.src;
var images = [
    "http://davidrhysthomas.co.uk/linked/astrid_avatar.png",
    "http://davidrhysthomas.co.uk/img/dexter.png"
    ];
for (i=0; i<lis.length; i++){
    lis[i].setAttribute('data-altimage',images[i]);
    lis[i].onmouseover = function(){
        graphic.src = this.getAttribute('data-altimage');
    };
}
Applying img hover to a certain picture only?

Applying img hover to a certain picture only?


By : pawan tarani
Date : March 29 2020, 07:55 AM
should help you out I would like to add the img hover specifically to the top banner and no other image. Is there any code that lets you do this? Thank you for any reply. , Give it unique ID and define CSS rule for that ID:
code :
<HTML><HEAD>
<TITLE>Cascade Studios™</TITLE>
<style>
body
{
background-image:url('http://icpy.webs.com/boxes/background.png');
background-repeat:repeat-y
position:center;
}
img {
    opacity: 1.0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
#top_banner:hover {
    opacity: 0.5;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}
</style>
</HEAD>
<BODY>

<center>
<img id="top_banner" src="http://icpy.webs.com/boxes/cascade.png"/><br>
<div id="main_box" style="position:absolute; left:120px; top:190px; z-index:1;"> 
<img src="http://icpy.webs.com/boxes/left.png" name="inlineframe" border="0" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="true"/></div> 


</BODY>
</HTML>
Up/Down picture by mouse hover

Up/Down picture by mouse hover


By : Trần Phuong
Date : March 29 2020, 07:55 AM
hop of those help? I want something like picture links in bottom of this site.Any body know whats the effect of the site or please suggest to me some javascript code example or library to make picture up/down on mouse hover and make some beautiful tooltip too. , You only need CSS, and on hover change the margin:
code :
img {
    margin-bottom: -75px;
    margin-top: 20px;
    padding-right: 40px;
    -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
    transition: margin 0.5s ease;
}

img:hover {
    margin-top: -20px;
}
Change picture when I hover over the picture's overlay

Change picture when I hover over the picture's overlay


By : Mr. P
Date : March 29 2020, 07:55 AM
Hope this helps I want to change the specific picture that I hover over. However, each pictures is underneath an overlay. , Well, if your picture is in the said overlay, here's the code:
code :
$(document).ready(function(){
$(".overlaydiv").hover(
    function() {$(this).find('img').attr("src","images/aboutR.png");},
    function() {$(this).find('img').attr("src","images/about.png");
    });
});
<div class="overlaydiv">
    <img src="img1.jpg" default-src="img1.jpg" hover-src="img1-2.jpg>
    <img src="img2.jpg" default-src="img2.jpg" hover-src="img2-2.jpg>
</div>
$(document).ready(function(){
    $(".overlaydiv").hover(
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('hover-src'));
            });
        },
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('default-src'));
            });
        });
});
Make a paragraph appear inside a picture on picture hover

Make a paragraph appear inside a picture on picture hover


By : H4ckyou
Date : March 29 2020, 07:55 AM
will help you Here is the code. Hope it will help you. if any changes please let me know.
code :
/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Original image */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}
/* Original text overlay */
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
 opacity: 1;
}

/********* Background and text only overlay on hover *******/
.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}
<div class="overlay-image">
  <a href="LINK_URL"> 
     <div class="normal">
        <div class="text">Image + text ORIGINAL</div>
     </div>
     <div class="hover">
        <img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
     </div>
  </a>
</div>
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org