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>
Related
I'm trying to center an image vertically inside a div - while keeping the proportions of the original image and only allowing it to be inside the div.
The original image source will change dynamically - it could be any size in theory: 200x150, 500x100, 500x500 etc.
What I have so far is this:
.outer {
position: relative;
background: gray;
width: 200px;
height: 150px;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gold;
overflow: hidden;
width: 200px;
height: 150px;
}
.inner img {
width: auto;
max-width: 100%;
max-height: 150px;
height: auto;
}
<div class="outer">
<div class="inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwI_CFh8BfnYAn6pL7Pe1AX_LuxrvEs4HqL2qWNPoTvESUwj5hdw">
</div>
</div>
In this example - I want it to look like this:
https://i.stack.imgur.com/a7nPt.png
Is it possible with css?
Thanks in advance
Just add following to the image
margin: 0 auto;
display: block;
full code:
.outer {
position: relative;
background: gray;
width: 200px;
height: 150px;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gold;
overflow: hidden;
width: 200px;
height: 150px;
}
.inner img {
width: auto;
max-width: 100%;
max-height: 150px;
height: auto;
margin: 0 auto;
display: block;
}
<div class="outer">
<div class="inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwI_CFh8BfnYAn6pL7Pe1AX_LuxrvEs4HqL2qWNPoTvESUwj5hdw"
</div>
</div>
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>
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>
I'm trying to have an image in the body of the page that's full width. Not a background. On the Center of this image id like a bar that blurs and darkens the background image. Then id like words on the bar.
Here is what i got:
#superimagecontainer {
position: relative;
height: auto;
}
#container4 {
position: absolute;
left: 0px;
width: 100%;
height: auto;
overflow: hidden;
z-index: 0;
}
#container4 img {
width: 100%;
position: relative;
z-index: 0;
}
#container4b {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 1;
}
#container4b img {
width: 100%;
position: relative;
filter: blur(3px) brightness(50%);
}
h8 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
opacity: 0.75;
}
<div id="superimagecontainer">
<div id="container4">
<img src="img/buildings750.jpg" alt="" />
</div>
<div id="container4b">
<img src="img/buildings750.jpg" alt="" />
<h8>THIS IS THE BEST TEXT SAMPLE EVER</h8>
</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;
}