The goal of my code is so that whenever I hover over an element it goes to the center of the page and the image is enlarged. However when I do this either either the images listed appears with a gap matching the resized element, or the unchanged elements take up the space that was freed causing issues when trying to hover over images more than once.
I'm incredibly new to html and css so bear with me if I missed something simple, was unable to find anything googling but may have just been not knowing the keywords to search for.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<div >
<div >
<img src="images\1.png" alt="drops logo 1">
<div >Drops Logo 1</div>
</div>
<div >
<img src="images\2.png" alt="Abstract 1">
<div >Abstract 1</div>
</div>
<div >
<img src="images\3.png" alt="drops logo 2">
<div >Drops Logo 2</div>
</div>
<div >
<img src="images\4.png" alt="Abstract 2">
<div >Abstract 2</div>
</div>
<div >
<img src="images\5.png" alt="Abstract 3">
<div >Abstract 3</div>
</div>
</div>
</body>
</html>
CSS
body{
margin: 5px;
background-color: rgb(203, 220, 236);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
display: block;
width: 110px;
}
.img-wrapper{
height: auto;
width: 100px;
text-align: center;
position: inherit;
transition: transform 0.5s ease-in-out;
float: left;
}
.img-wrapper:hover{
transition: transform 0.5s ease-in-out;
transform: rotate(1deg);
width: 1920px;
position: relative;
align-self: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
font-style: italic;
}
.img-wrapper:hover img{
width: 600px;
}
img{
width: 100px;
}
I'm assuming it's something to do with the position tag but all the combinations I've tried have not worked.
CodePudding user response：
Is that something like this that you wanna do? In each display() specify your resource like :
display('img_1.png')
in place of
display('https://dummyimage.com/600x600/a1a1a1/fff')
Of course, you will have to customize your style-sheet too. And better, you may use a grid layout to place your layers as you want... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
EDIT :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body{
margin: 5px;
background-color: rgb(203, 220, 236);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
display: block;
width: 110px;
}
.img-wrapper{
height: auto;
width: 100px;
text-align: center;
position: inherit;
transition: transform 0.5s ease-in-out;
float: left;
}
#output{
position:fixed;
transition: transform 0.5s ease-in-out;
transform: rotate(1deg) translateX(200px) translateY(80px);
/*transform: rotate(1deg);*/
width:600px;
align-self: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
font-style: italic;
}
</style>
<script>
function display(ressource){
var out = document.getElementById("output");
out.innerHTML = "<img src=" ressource "alt='image'>"
}
function erase(){
var out = document.getElementById("output");
out.innerHTML = "";
}
</script>
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<div >
<div >
<img src="https://dummyimage.com/100x100/a1a1a1/fff" alt="drops logo 1" onm ouseOver="display('https://dummyimage.com/600x600/a1a1a1/ff0000')" onm ouseOut="erase()">
<div >Drops Logo 1</div>
</div>
<div >
<img src="https://dummyimage.com/100x100/a1a1a1/fff" alt="Abstract 1" onm ouseOver="display('https://dummyimage.com/600x600/a1a1a1/fff')" onm ouseOut="erase()">
<div >Abstract 1</div>
</div>
<div >
<img src="https://dummyimage.com/100x100/a1a1a1/fff" alt="drops logo 2" onm ouseOver="display('https://dummyimage.com/600x600/a1a1a1/00ff00')" onm ouseOut="erase()">
<div >Drops Logo 2</div>
</div>
<div >
<img src="https://dummyimage.com/100x100/a1a1a1/fff" alt="Abstract 2" onm ouseOver="display('https://dummyimage.com/600x600/a1a1a1/0000ff')" onm ouseOut="erase()">
<div >Abstract 2</div>
</div>
<div >
<img src="https://dummyimage.com/100x100/a1a1a1/fff" alt="Abstract 3" onm ouseOver="display('https://dummyimage.com/600x600/a1a1a1/ff9900')" onm ouseOut="erase()">
<div >Abstract 3</div>
</div>
</div>
<div id="output"></div>
</body>
</html>
CodePudding user response：
I wanted the image as well as the text to appear in the center of the screen. I realized that the best way to do this was instead of moving the original div to the middle of the screen I needed a second div element within the first that appears on hover.
HTML
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<div >
<div >
<div ><img src="images\1.png" alt="drops logo 1">
Drops Logo 1
<div ><img src="images\1.png" alt="drops logo 1">
Drops Logo 1
</div>
</div>
</div>
<div >
<div ><img src="images\2.png" alt="Abstract 1">
Abstract 1
<div ><img src="images\2.png" alt="Abstract 1">
Abstract 1
</div>
</div>
</div>
<div >
<div ><img src="images\3.png" alt="drops logo 2">
Drops Logo 2
<div ><img src="images\3.png" alt="drops logo 2">
Drops Logo 2
</div>
</div>
</div>
<div >
<div ><img src="images\4.png" alt="Abstract 2">
Abstract 2
<div ><img src="images\4.png" alt="Abstract 2">
Abstract 2
</div>
</div>
</div>
<div >
<div ><img src="images\5.png" alt="Abstract 3">
Abstract 3
<div ><img src="images\5.png" alt="Abstract 3">
Abstract 3
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
margin: 5px;
background-color: rgb(203, 220, 236);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
width: 110px;
}
.showhim{
text-align: center;
z-index: 1;
}
.img-wrapper{
padding-bottom: 40px;
}
.showme{
position: absolute;
padding: 10px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-style: italic;
opacity: 0.0;
align-content: center;
text-align: center;
width: 630px;
}
.showhim:hover .showme{
opacity: 1.0;
}
.showhim:hover .showme img{
width: 600px;
}
img{
width: 100px;
}