I've got a simple mouseover effect on a webpage I'm working on that I'm trying to have auto resize to fit the page so it is more mobile friendly.
Any help would be greatly appreciated. I know I need something like
.responsive {
width: 100%;
height: auto;
...but I'm not certain how/where to insert it so it works.
Code currently looks like this...
<body>
<a href="https://www.bodensurfaces.com/cowboy-trail.html">
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
max-width: 100%;
height: auto;
}
.image3 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
</style>
<img class="image3" src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/cowboy-trail-350x250-white-border_orig.png">
Use a div to wrap your image, then apply the responsive class to your div. Also set your image width to 100% so it covers the whole div.
<body>
<a href="https://www.bodensurfaces.com/cowboy-trail.html">
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
max-width: 100%;
height: auto;
}
.image3 {
width: 100%;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<div class="responsive">
<img class="image3"
src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/cowboy-trail-350x250-white-border_orig.png">
</div>
</body>
Related
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>
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 have simple html doc with a small amount of css. The transform works but not the transition I have tried numerous things and its looks like an exact copy of a tutorial I'm watching, is there something wrong with the syntax that I keep missing or is there something else that's causing it not to work?
<!DOCTYPE html>
<html>
<head>
<title>transition Learning</title>
<meta charset="utf-8">
<style>
#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 600ms ease-in-out;
transform: translate(200px,200px) rotate(45deg);
}
</style>
</head>
<body>
<div id="testItem"></div>
</body>
</html>
Because you don't have anything transitioning? (Click on the box)
document.getElementById("testItem").onclick = function () {
this.classList.toggle('transition');
}
#testItem.transition {
transform: rotate(90deg);
}
#testItem{
background-color: blue;
width: 80px;
height: 80px;
margin: 300px auto;
transition: transform 2s ease-in-out;
transform: translate(0,0) rotate(45deg);
}
<div id="testItem"></div>
I am using media query to make my site responsive but when I adjust the screen size and adjust the value of the top position element the hover effect does not work. I have tried every thing but nothing seems to work. Please help, heres my code.
#getintouch{
position: relative;
width: 100%;
height: auto;
background-color: #FFBA00;
top: 400px;
}
.social-media-icon{
position: relative;
width: 100%;
height: auto;
text-align: center;
}
.social-media-header{
position: relative;
text-align: center;
margin: 5%;
font-family: Lucida Calligraphy;
}
.social-media{
position: relative;
width: 80px;
height: 80px;
overflow: hidden;
text-align: center;
display: inline-block;
margin: 2% 5% 10% 5%;
}
.social-media a {
position: relative;
}
.social-media img{
transition: transform 0.2s ease-in-out;
-webkit-transition: transform 0.2s ease-in-out;
-moz-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
}
.social-media img:hover{
transform: translate3d(0, -80px, 0);
}
#media (max-width: 900px) and (min-width: 760px){
#getintouch{
top: 900px;
}
}
#media(max-width: 759px){
#getintouch{
top: 1700px;
}
}
<div id="getintouch">
<div class="social-media-header">
<h1>Get In Touch</h1>
</div>
<div class="social-media-icon">
<div class="social-media">
<img src="logo/social-media-facebook.png" width="100%">
</div>
<div class="social-media">
<img src="logo/social-media-twitter.png" width="100%">
</div>
<div class="social-media">
<img src="logo/social-media-linkedIn.png" width="100%">
</div>
<div class="social-media">
<img src="logo/contact.png" width="100%">
</div>
</div>
</div>
I suspect that you forgot to add the following keywords: only, screen, and
The only value is used if you want to hide the rule from older browsers that don't support the syntax; for browsers that do support it, only is effectively ignored.
The screen keyword is a media type. It is used to specify that the media query is intended for color computer screens.
Apply the following changes to your stylesheet
#media only screen and (max-width: 900px) and (min-width: 760px){
#getintouch{
top: 900px;
}
}
#media only screen and (max-width: 759px){
#getintouch{
top: 1700px;
}
}
In addition to that, make sure that you have the following meta tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I have a working transition and a broken transition, as far as I can tell I'm doing the same thing on both.
main.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Lorem ipsum</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="content">
<div class="button"><span class="button-content">transformer</span></div>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</body>
</html>
main.css:
#content {
background-color: lightgray;
transition: width 2s ease, height 2s ease;
}
#content:hover {
width: 800px;
height: 400px;
}
.button {
background-color: gray;
width: 100px;
height: 50px;
border-radius: 10px;
border: 2px solid #73AD21;
text-align: center;
transition: width 2s ease, height 2s ease;
}
.button:hover {
width: 150px;
height: 100px;
}
.button-content {
line-height: 50px;
}
The button transitions nicely when hovered over, but the content div changes size instantly with no transition! I'm at a loss.
It's because the height and width for the #content div before hover takes place are not defined. The buttons dimensions are defined.