Tag: hover

How to remove link from only one element?

I have two div in one a. I want link to only first div. this is code: HTML <!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="./style.css"> <title>Document</title> </head> <body> <a href="#"> <div id="div1"></div> <div id="div1info"></div> </a> </body> </html> CSS #div1 { width: 15em; height: 25em; background-color:… Read More How to remove link from only one element?

MRLeave a comment

How to implement the hover effect on an image to be displayed another image over?

This is the html code <img class="footballinfo" src="FootBallInfo.jpg" alt="FootBallInfo1" width="600" height="400" > <img class="readmore" src="ReadMore.jpg" alt="readmore1" width="600" height="400" > This is the CSS code .footballinfo{ position: absolute; top:230px; left: 400px; } .readmore{ position: absolute; top:230px; left: 400px; display: none; } .footballinfo:hover .readmore{ display: inline; opacity:0.6; } This is the code that I have came up… Read More How to implement the hover effect on an image to be displayed another image over?

MRLeave a comment

Element not doing anything when hovered

*{ padding: 0; margin: 0; box-sizing: border-box; } body{ display: grid; place-items: center; height: 100vh; width: 100vw; } .container{ display: grid; place-items: center; background-color: rgb(43, 42, 42); border-radius: 15px; padding: 15px; width: 245px; height: 300px; transition: all 1.2s ease; z-index: -1; } .box{ display: grid; place-items: center; background-color: rgb(53, 53, 53); border-radius: 15px; padding: 15px;… Read More Element not doing anything when hovered

MRLeave a comment

using gif as a hover effect to an area object

I’m trying to add gif by using hover effect for area map object but something is wrong here… could you please help me to solve this. here is HTML code: <div class="image-container"> <img src="main_image.png" usemap="#image-map"> <map name="image-map"> <area href="" coords="430,432,315,292" shape="rect"> </map> </div> here is CSS code: .image-container { width: 1500px; height: 1500px; position: relative;… Read More using gif as a hover effect to an area object

MRLeave a comment

CSS: Want to hover over svg and change to text

I have a house icon and I want as soon as I hover over it the SVG changes to the text Home Demo: .fa-house:hover { content: “Home”; } <li routerLink=”/home”><svg aria-hidden=”true” focusable=”false” data-prefix=”fas” data-icon=”house” class=”svg-inline–fa fa-house ” role=”img” xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 576 512″ color=”#4d4d4e”> <path fill=”currentColor” d=”M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0… Read More CSS: Want to hover over svg and change to text

MRLeave a comment

CSS: Want to hover over svg and change to text

I have a house icon and I want as soon as I hover over it the SVG changes to the text Home Demo: .fa-house:hover { content: “Home”; } <li routerLink=”/home”><svg aria-hidden=”true” focusable=”false” data-prefix=”fas” data-icon=”house” class=”svg-inline–fa fa-house ” role=”img” xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 576 512″ color=”#4d4d4e”> <path fill=”currentColor” d=”M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0… Read More CSS: Want to hover over svg and change to text

MRLeave a comment

CSS hover margin-top change does not work when the parent container contains more than one element

I am trying to create a menu bar with elements which move upwards when hovered, but it only works when the parent container contains exactly one element (like in title-bar-right, unlike in title-bar-left). Other properties (the font family in this example) change as expected. I’ve tried removing the transition duration, but it does not fix… Read More CSS hover margin-top change does not work when the parent container contains more than one element

MRLeave a comment

How to change a color of text and icon within a button whilst hovering over the button?

So far, the code below changes the color of the text and the background whilst hovering. However, the icon will only change while the cursor is hovering over the img. I would like both img and text to change while I hover anywhere in the box. If this is possible your help will be massively… Read More How to change a color of text and icon within a button whilst hovering over the button?

MRLeave a comment

return to initial position when the mouse is no longer over it

I have this 3d parallax effect when the mouse hovers over the card. But I don’t know how to make it return to its original position when the mouse is no longer on it. let cardParallx = document.querySelector(‘.card-active’); cardParallx.addEventListener(‘mousemove’,(e)=>{ let x =(window.innerWidth/2 – e.pageX)/30; let y =(window.innerHeight/2 – e.pageY)/30; cardParallx.style.transform =`rotateX(${-y}deg) rotateY(${-x}deg)`; }); <div class=”card-active”>… Read More return to initial position when the mouse is no longer over it

MRLeave a comment