I need hover effect on an image, fixed to image size even when image become large or small in responsive.
<div>
<img scr="abc.jpg">
</div>
.img-wrap{
width: 400px;
height: auto;
position: relative;
}
.img-wrap > img{
width: 100%;
height: auto;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
display: none;
}
.img-wrap:hover > .overlay{
display: inline-block;
}
<div class="img-wrap">
<div class="overlay"></div>
<img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png">
</div>
Related
I have an image and i want to put 2 circles on top of it, instead of the eyes.
body {
background-color: lightgrey;
color: #fff;
padding: 0;
margin: 0;
}
main {
display: grid;
place-items: center;
position: relative;
}
#container {
min-height: 100vw;
min-width: 100vw;
background: none;
aspect-ratio: 1 / 1;
}
.eye-container {
position: relative;
border-radius: 50%;
background-color: red;
width: 12vw;
height: 12vw;
}
.eye-container.left {
top: -84%;
left: 36%;
}
.eye-container.right {
top: -96%;
left: 51%;
}
.eye {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 3vw;
height: 3vw;
border-radius: 50%;
background-color: #000;
}
img {
max-width: 100%;
min-width: 100%;
}
<main>
<div id="container">
<img id="sponge" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="eye-container left">
<div class="eye"></div>
</div>
<div class="eye-container right">
<div class="eye"></div>
</div>
</div>
</main>
The current issue is the image is too big, it is stretched.
The initial problem was that the layout was not responsive on mobile, and i've did some changes and now the image is this big.
I've used aspect-ratio: 1 / 1; because top was not working with negative percentage, and with pixels the eyes location is changing if is shrink the window.
Do you have another suggestion, maybe a simplified code will be better.
Thank you.
I'm a noob developer and I felt like, this was a tiny engineering job "LOL" but I did it for you.
So the most important point in this is to keep the image and the eyes in the same position. and to do that, you should position them in a parent container for image and eyes considering four important factors:
1- Parent position: relative; All children position: absolute;
2- All children's width: %; so it can stay in the same spot in its parent whatever the width of the parent is.
3- Eyes and eyeballs positioning top, left, right must be % too for the same purpose.
4- To change the image size, use the parent width. do not change the image size.
If you follow these steps, you can position any element with any image or other element.
* {
border: 1px solid blue;
margin: 0;
padding: 0;
}
.container {
width: 200px; /* use this to change the picture size. do not change it somewhere else */
position: relative;
}
.image {
width: 100%;
}
.eye-container{
position: absolute;
border-radius: 50%;
background-color: red;
width: 12%;
height: 12%;
}
.left-eye {
top: 17%;
left: 36%;
}
.right-eye {
top: 17%;
left: 51%;
}
.eyeball {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 30%;
height: 30%;
border-radius: 50%;
background-color: #000;
}
<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="left-eye eye-container">
<div class="eyeball"></div>
</div>
<div class="right-eye eye-container">
<div class="eyeball"></div>
</div>
</div>
How to make this green text ribbon stick to the left side of the image, so it will be there even if image size is shrinking responsively?
.wrapper {
max-width: 600px;
margin: 100px auto;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
span {
position: absolute;
left: 0;
top: 0;
padding: 10px;
width: 100%;
transform: rotate(-90deg);
background-color: #00ff00;
transform-origin: center;
}
<div class="wrapper">
<div class="img-wrapper">
<img src="http://lorempixel.com/640/480/sports/" alt="" />
<span class="img-label">Some Text</span>
</div>
</div>
try use transform-origin:0% 0% and remove the top property from span. also change top:0 to bottom:0 in img
.wrapper {
max-width: 600px;
margin: 100px auto;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
img {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: auto;
}
span {
position: absolute;
left: 0px;
padding: 10px;
width: 100%;
transform: rotate(-90deg);
background-color: #00ff00;
transform-origin: 0% 0%;
}
<div class="wrapper">
<div class="img-wrapper">
<img src="http://lorempixel.com/640/480/sports/" alt="" />
<span class="img-label">Some Text</span>
</div>
</div>
I am trying to overlay a circle over a square image. The text needs to be centered hoziontally and verticaly in the circle.
I have almost got it right with a square div, but as soon as I put an image into the mix, the circle moves below the image.
My code.
.Container {
width: 300px;
height: 300px;
}
.Square {
height: 100%;
width: 100%;
background-color: yellow;
}
.Square img {
width: 100%;
height: 100%;
}
.Circle {
position: relative;
height: 70%;
width: 70%;
top: 15%;
left: 15%;
background-color: rgba(0, 0, 200, 0.5);
border-radius: 50%;
/*80px;*/
margin-bottom: 50%;
/*30px; */
float: left;
margin-right: 20px;
}
.Circle h3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
text-align: center;
}
<div class="Container">
<div class="Square">
<img src="SiteData/Images/ProfilePics/ProfileImg.png" />
<div class="Circle">
<h3>Words Here</h3>
</div>
</div>
</div>
The Container will ultimately be of variable width, determined by bootstrap col
Since you want to position your circle over the image, you have to use position: absolute instead of relative. This will take it out of the document flow and you can position it anywhere you want within the parent element.
In order for this to work, you will also have to declare position: relative on the parent.
See proof-of-concept example below:
.Container {
width: 300px;
height: 300px;
}
.Square {
height: 100%;
width: 100%;
background-color: yellow;
position: relative; /* To allow children to be absolutely positioned */
}
.Square img {
width: 100%;
height: 100%;
}
.Circle {
position: absolute; /* Use absolute positioning */
height: 70%;
width: 70%;
top: 15%;
left: 15%;
background-color: rgba(0, 0, 200, 0.5);
border-radius: 50%;
/*80px;*/
margin-bottom: 50%;
/*30px; */
float: left;
margin-right: 20px;
}
.Circle h3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
text-align: center;
}
<div class="Container">
<div class="Square">
<img src="SiteData/Images/ProfilePics/ProfileImg.png" />
<div class="Circle">
<h3>Words Here</h3>
</div>
</div>
</div>
#first {
position: relative;
width: 20%;
height: 20%;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
border-radius: 50%;
background-color: blue;
}
<html>
<body>
<div id="first">
<div id="second">
</div>
</div>
</body>
</html>
How to get it i want the second div in the exact center of the first div but it is not even visible. how achieve this without using left, top attributes.
note:i wants align it only using css but not using tag.
To center absolutely positioned div with known width, you can use this:
.inner1 {
left: 0;
right: 0;
margin: auto;
}
Or, if you need to center it both horizontally and vertically:
.inner2 {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
If width of inner is unknown - use css3 transforms:
.inner3 {
left: 50%;
transform: translateX(-50%);
top: 0;
}
Ant for vertical centering also:
.inner4 {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Fiddle demo: https://jsfiddle.net/4qxpc0ua/
calculate the top and left position and apply it for the second div.
#first {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #94b8b8;
}
#second {
position: absolute;
width: 15%;
height: 15%;
left:42.5%; //50% - (15% / 2)
top:42.5%; //50% - (15% / 2)
border-radius: 50%;
background-color: blue;
}
DEMO
There are several possibilities to do what you want:
.outer {
background: lightblue;
width: 300px;
height: 100px;
}
.inner {
background: black;
width: 100px;
height: 50px;
color: white;
}
<div class="outer" align="center">
<div class="inner">
Deprecated (use css)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="position: relative; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer" style="position: relative">
<div class="inner" style="position: absolute; left: 50%; margin-left: -50px;">
:)
</div>
</div>
<br>
<div class="outer">
<div class="inner" style="margin: 0 auto;">
</div>
</div>
Another solution
.outer {
width: 100%;
text-align: center;
}
.inner {
display: inline-block;
}
I have a structure like below:
.a {
display: block;
height: auto;
left: 11px;
top: 89.3px;
width: auto;
position: absolute;
}
.a img {
display: block;
height: auto;
width: 100%;
}
.b1 {
position: absolute;
}
.prev {
background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
border: medium none !important;
height: 25px;
left: -807px;
overflow: hidden;
padding: 0;
position: absolute !important;
top: -220px;
width: 25px;
}
.prev span {
text-indent: -9999px;
}
<div class="a">
<div class="a1">
<img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
</div>
<div class="b">
<div class="b1">
<button class="prev">
<span>previous</span>
</button>
<button class="nxt">
<span>next</span>
</button>
</div>
</div>
</div>
Now the problem is, I need to fixed previous and next button images on my shasta-daisy-3.jpg image. For this I used position: absolute for my nxt and prev classes. But when I resized the window, my previous image continously dragged to its left until it disappears, I am unable to stick it to one place over an image
You need create wrapper with position: relative;.
The main problem is your CSSHere I've created a JSFiddle and updated your CSS slightly as:
.b {
position: absolute;
left: 0px;
right: 0px;
top: 50%;
margin: auto;
width: 100%;
}
.b1 > button {
background: rgba(0, 0, 0, 0) url(http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png) no-repeat scroll 0 0;
position: absolute;
top:0;
height:25px;
width:25px;
margin:0;
padding:0;
text-indent: -999px;
overflow: hidden;
border: none;
display: inline-block;
}
.prev {
left: 0;
}
.nxt {
right: 0;
}
And this will give the output as:
In this position of next and prev buttons won't change if you resize the browser window. Hope it will work for you.
Your problem is that you have not given top and left values to position .b, so it doesn't really get absolutly positioned just by saying: position: absolute. You have to add: top:0; left:0 (or right, bottom) so it gets just over your image, like this:
.a {
display: block;
height: auto;
left: 11px;
top: 89.3px;
width: auto;
position: absolute;
}
.a img {
display: block;
height: auto;
width: 100%;
}
.b1 {
position: absolute;
top: 0;
left: 0;
}
.prev {
background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
border: medium none !important;
height: 25px;
left: ;
overflow: hidden;
padding: 0;
position: absolute !important;
top: 0;
width: 25px;
}
.prev span {
text-indent: -9999px;
}
<div class="a">
<div class="a1">
<img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
</div>
<div class="b">
<div class="b1">
<button class="prev">
<span>previous</span>
</button>
<button class="nxt">
<span>next</span>
</button>
</div>
</div>
</div>