that's my first post here. I'm working on a project and one thing block me so i'm trying to ask you if is a solution for this.
I have 3 images with display:flex and justify-content:center. (parrent div)
Then i wanna make them on hover to transform(translate) to same position.
Like, when i hover first image to go left: 200px; and top: 200px; (ex) and same for the rest of two without modify the originaly position from display flex.
Is a easy way of doing that?
Thank you!
Also i wanna make them in JS later but first i wanna make this working fine
That's what i wanna do:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(200px, 200px);
}
<!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>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
for simplest answer, use CSS variables with a calc() function.
one time all the elements!! easy and fast
I commented on the code if you want...
the first element has a --i var with 0, so it will be 0 position x
the second element has a --i var with 1, so it will be -100 position x
the third element has a --i var with 2, so it will be -200 position x
the amazing part about this, is if you want to add more images, it will be easy for you, because the formula is calculated by CSS (not you)
here the fixed code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* here the trick */
--end-position: calc(-100px * var(--i));
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
/* use the DRY method (Dont Repeat Yourself) */
.container img:hover {
transition: 3s;
/* one time for all, that's easy! and fast*/
transform: translate(var(--end-position), 200px);
}
<div class="container">
<img style="--i: 0;" class="img-test1" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 1;" class="img-test2" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 2;" class="img-test3" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</div>
To replicate the positioning given in the picture you need to move the first element by 0 in the x direction, the second by -100px, the third by -200px to get them all to translate to under the first one.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(0, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(-100px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(-200px, 200px);
}
<!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>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
Related
i am trying to comlete frontenmentor io challenges.I am as beginner in html and css i applied border radius as 10px to the image to round the edges of image. but it is not reflecting. also i added outfit as font family.but it is also not reflecting.i have given the html/css code here.Kindly help me to fix this
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: hsl(212, 45%, 89%);
}
.main{
width: 300px;
height: 500px;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
text-align: center;
border-radius: 10px;
}
.main .img{
width: 250px;
height: 250px;
padding: 1rem;
}
.container{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1{
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container"><div class="main">
<img class= "img" src="/images/image-qr-code.png">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
The border-radius needs to be applied to the .img. However, you won't see it given there is also a padding of a greater amount (1rem). This snippet removed that so you get to see the border-radius.
To increase the generality, as you have given a fixed width and height to the img, I have included an object-fit: contain to ensure all the image is always seen whatever its aspect ratio (you could alternatively use cover to ensure that full size is covered, though it could mean there is some cropping of the image).
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(212, 45%, 89%);
}
.main {
width: 300px;
height: 500px;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
text-align: center;
border-radius: 10px;
}
.main .img {
width: 250px;
height: 250px;
object-fit: contain;
border-radius: 10px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1 {
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
<img class="img" src="https://picsum.photos/id/1015/300/300">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
Note, there was also a *body at the start of the CSS. I have just guessed that you meant to remove default margin etc from all elements.
add overflow: hidden css in .main class.
The problem is you have added radius to the parent of the image. When content overflow out of radius, they are visible by default.
So to hide the content you need to put overflow hidden.
Try this, I have added border and set border-radius: inherit (this will simply set the border of child as per parent element's property) to img class.
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(212, 45%, 89%);
}
.main {
max-width: 250px;
width: fit-content;
height: fit-content;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
padding: 1em;
border-radius: 10px;
overflow: hidden;
text-justify: none;
text-align: center;
box-sizing: content-box;
}
.main .img {
width: 100%;
height: 250px;
border: 1px solid black;
border-radius: inherit;
}
.main p {
text-justify: inter-word;
text-align: justify;
}
.container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1 {
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
<img class="img" src="/images/image-qr-code.png" />
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
You need to add the border to the image not the parent div your code should be something like this
.main img{ border-radius: 10px; }
When I run the file below, there is space between the img and the the button, why and how do I fix this issue?
Plus there seems to be no animation when I hover the div, but the cursor does change shape so why don't the other CSS rules work too? The transform: rotateY: (360deg); actually seems to work a little bit, but it looks like it only did very little.
body {
margin: 0%;
}
#Homepage {
margin: 5%;
font-family: sans-serif;
}
#Homepage .selection {
width: 40%;
position: relative;
display: flex;
flex-direction: column;
border: 5px solid;
border-radius: 20px;
overflow: hidden;
}
#Homepage .selection :hover {
cursor: pointer;
bottom: 100;
transform: rotateY(360deg);
}
#Homepage .selection img {
box-sizing: border-box;
width: 100%;
}
#Homepage .selection button {
width: 100%;
height: 100px;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="Homepage">
<div class="selection" style="float: left;">
<a href="#" onclick="show(SecondAttempt, Homepage);">
<img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
<button type="button"><h2><strong>2nd attempt to make a game</strong></h2></button>
</a>
</div>
<div class="selection" style="float: right;">
<a href="#" onclick="show(ScrollingTest, Homepage);">
<img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
<button type="button"><h2><strong>Scrolling Test</strong></h2></button>
</a>
</div>
</div>
</body>
</html>
To remove the space, add display: block; to the image
As of animation, I'm not quiet sure what animation supposed to be, and since you don't have any transition affects for tranform, the rotateY(360deg) simply rotates element to it's original state without any visual change.
body {
margin: 0%;
}
#Homepage {
margin: 5%;
font-family: sans-serif;
}
/* Note, added new DIV.inner container in HTML, without it, animation glitches when cursor is moving */
#Homepage .selection > .inner { /* changed */
width: 100%; /* changed */
position: relative;
display: flex;
flex-direction: column;
border: 5px solid;
border-radius: 20px;
overflow: hidden;
}
/* added */
#Homepage .selection {
width: 40%;
}
/* added */
/* uncomment this if you want reverse animation when cursor moves away */
/*
#Homepage .selection > .inner {
transition: transform 1s;
}
*/
#Homepage .selection:hover > .inner { /* changed */
cursor: pointer;
bottom: 100; /* wrong value */
transition: transform 1s; /* added */
transform: rotateY(360deg);
}
#Homepage .selection img {
box-sizing: border-box;
width: 100%;
display: block; /* added */
}
#Homepage .selection button {
width: 100%;
height: 100px;
border: none;
}
#keyframes left {
from {right: 10%;}
to {right: 0;}
}
#keyframes right {
from {left: 10%;}
to {left: 0px;}
}
/* added */
.selection.left
{
float: left;
}
.selection.right
{
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="Homepage">
<div class="selection left">
<div class="inner">
<a href="#" onclick="show(SecondAttempt, Homepage);">
<img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
<button type="button"><h2><strong>2nd attempt to make a game</strong></h2></button>
</a>
</div>
</div>
<div class="selection right">
<div class="inner">
<a href="#" onclick="show(ScrollingTest, Homepage);">
<img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
<button type="button"><h2><strong>Scrolling Test</strong></h2></button>
</a>
</div>
</div>
</div>
</body>
</html>
I'm trying to animate a sign up / log in page where if you click on the right side, the right div will move to the left and the left div will move to the right. same in reverse. I'm having trouble playing 2 animations at once, also I haven't really animated in css before.
Image of my site:
My Css:
* {
margin: 0px;
border: 0px;
padding: 0px;
}
#keyframes example {
100% {
left: 0vw;
}
}
#keyframes example2 {
100% {
right: 40vw;
}
}
#right {
height: 100vh;
width: 40vw;
background-color: #363e47;
left: 60vw;
display: block;
position: absolute;
animation: example 0.5s linear forwards;
}
#left {
height: 100vh;
width: 60vw;
background-color: rgb(47, 52, 58);
display: block;
position: absolute;
animation: example2 0.5s linear forwards;
}
My Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="right"></div>
<div id="left"></div>
</body>
</html>
I would like to get a hover effect on my image, when the user goes over the image a background should appear on the image with some text (see example below). My css doesn't look like it at all unfortunately. It is not in the middle and the image is not round but more like an egg.
My question now is, how can I use CSS to make the image so that it is round and when going over it the text is displayed nicely in the middle.
I also use Bootstrap as an additional library, if it should be easier.
What I have:
What I want:
Pic.js
<div class="container-profilepic">
<img src="./image.png" width="150" height="150" alt="Profibild" className="photo-preview"></img>
<div class="middle-profilepic">
<div class="text-profilepic"><i class="fas fa-camera"></i>
<div class="text-profilepic">Change it
</div>
</div>
Photo.css
.photo-preview{
width: 100% !important;
max-width: 125px !important;
height: 100% !important;
max-height: 125px!important;
border-radius: 50% !important;
}
.middle-profilepic {
transition: .5s ease;
opacity: 0;
position: absolute;
text-align: center;
}
.container-profilepic:hover .photo-preview {
opacity: 0.3;
}
.container-profilepic:hover .middle-profilepic {
opacity: 1;
}
.text-profilepic {
color: green;
font-size: 16px;
}
I checked this question befor out How do I add animated text on these images when I hover my cursor without changing current style?
Unfortunately it didn't help me.
I tried it before with top, left, postion...
.middle-profilepic {
transition: .5s ease;
opacity: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The result
So I removed it, because the result was much closer at what I want
Solution
You need to set the parent div with position: relative and the inner content (icon + image) as position: absolute elements, stretching to fit.
If you need the avatar image to ba an img tag you can use object-fit: cover in CSS (It has wide support nowadays: https://caniuse.com/?search=object-fit).
Tips
be careful the HTML you posted is invalid, has some broken tags
I vividly suggest you move away from using heavily !important within your CSS
Working example
body {
font-family: sans-serif;
}
.profilepic {
position: relative;
width: 125px;
height: 125px;
border-radius: 50%;
overflow: hidden;
background-color: #111;
}
.profilepic:hover .profilepic__content {
opacity: 1;
}
.profilepic:hover .profilepic__image {
opacity: .5;
}
.profilepic__image {
object-fit: cover;
opacity: 1;
transition: opacity .2s ease-in-out;
}
.profilepic__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.profilepic__icon {
color: white;
padding-bottom: 8px;
}
.fas {
font-size: 20px;
}
.profilepic__text {
text-transform: uppercase;
font-size: 12px;
width: 50%;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />
<div class="profilepic">
<img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" />
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text">Edit Profile</span>
</div>
</div>
Solution
Create a container with relative position and fixed height and width
Add an image as a background image respective to the container size
Add content with position: absolute
solution using bootstrap-5
.container-profilepic {
width: 150px;
height: 150px;
}
.photo-preview {
background-image: url( https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 );
background-size: cover;
background-position: center;
}
.middle-profilepic {
background-color: rgba( 255,255,255, 0.69 );
}
.container-profilepic:hover .middle-profilepic {
display: flex!important;
cursor: pointer;
}
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
</head>
<body>
<div class="container-profilepic card rounded-circle overflow-hidden">
<div class="photo-preview card-img w-100 h-100"></div>
<div class="middle-profilepic text-center card-img-overlay d-none flex-column justify-content-center">
<div class="text-profilepic text-success">
<i class="fas fa-camera"></i>
<div class="text-profilepic">Change it</div>
</div>
</div>
</div>
</body>
</html>
.image {
position: relative:
}
.text-div {
position: abolute;
top: 10px;
left:40%;
}
Also img tag it's self-closing tag
I am creating a simple "coming soon" page and for the life of me cannot figure out how to create an image link that, when hovered over, changes to another image.
I've trawled google and cannot find an answer that works.
I am guessing I am missing something obvious and have overlooked it.
I feel like I can't see the wood for the trees.
Html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ablockalypse</title>
<meta name="description" content="Ablockalypse">
<meta name="author" content="Coming Soon">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<img src="images/cityscape.png">
<div id="header">
<img src="images/banner.png">
</div>
<div id="logo">
<img src="images/Logo.png">
</div>
<div id="info">
<img src="images/info_red.png">
</div>
</div>
</body>
</html>
Stylesheet :
body {
background-color: #746747
}
#container {
position: relative;
width: 800px;
height: auto;
display: block;
margin: auto;
max-width: 100%;
width: auto\9; /* ie8 */
}
#header {
position: absolute;
top: 20px;
left: 6%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#logo {
position: absolute;
top: 40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
-ms-transform: rotate(13deg); /* IE 9 */
-webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
transform: rotate(8deg);
}
#info {
position: absolute;
top: 450px;
left:290px;
width: 276px;
height: 134px;
background-image: url(images/info_red.png) no-repeat;;
}
#info :hover {
background-image: url(images/info_green.png) no-repeat;;
}
I would appreciate any help!
the last selector on your stylesheet, has a space that is causing it not to work.
#info :hover should be #info:hover