I'm trying to position an image in determined height.
Just like this main image:
http://littlelines.com/
I have this:
HTML
<div class="present100">
<img id="imagem" src="teste.jpg" />
</div>
CSS
.present100 {
width: 100%;
height: 620px;
background-color: #333;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
margin: auto;
}
#imagem {
position: relative;
width: 100%;
min-width: 1300px;
min-height: 100%;
}
I don't know how to center the image on resize just like the http://littlelines.com/
Not sure why you have absolute position on the .present100 element, but you will have to absolutely position the image as well
#imagem {
position: absolute;
width: 100%;
min-width: 1300px;
min-height: 100%;
left:50%;
top:50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Demo at http://jsfiddle.net/gaby/vMyvc/
Related
Is there another way of placing text over an image beside using position: absolute; ?
Working with position: absolute; on different screen sizes doesn't seem like the thing i want to do.
I kept looking for an answer but all i can find about it is the classic : use position absolute.
HTML:
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="img-text">Make it possible!</p>
</div>
CSS:
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 45%;
left: 45%;
}
Try this instead,
add this style to img
#header-img{width:100%;height:auto;}
if you align text in center by
.text-header{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
#header-img{width:100%;height:auto;}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 50%;
left: 50%;
color: white;
font-weight:800;
font-size: 30px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="text-header">Make it possible!</p>
</div>
Technically, no.
However, you can combine a text element with position: absolute inside of an element with position: relative. This will position the element in an absolute manner (based on pixels/percentages relative to the parent element itself, rather than the entire document.
Expanding on this, you could include an image in said element (either as a background image or as another absolutely positioned div, and use percentages to position your text relative to the container.
#rel{
display: block;
position: relative;
width: 400px;
height: 600px;
}
img{
width: 100%;
height: 100%;
}
h1{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="rel">
<img src="https://picsum.photos/400/600">
<h1>Hello world!</h1>
</div>
I have an svg icon for a website that I would like to make into a css shape so that I can make a custom effect on hover.
I am using pure CSS for this and am not sure I am approaching the problem correctly.
.wrapper {
position: relative;
height: 100vh;
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(1.2) translate(-50%, -50%);
}
.square:hover .square:before {
transform: scale(1.2);
}
.square:hover .square:before, .square:hover .square:after {
height: 4px;
}
<div class="wrapper">
<div class="square"></div>
</div>
https://codepen.io/Portismouth/pen/ZEEXeVP
so far I am using a simple square with a cross created using the :before and :after psuedo-selectors. On hover, Im trying to make the square bigger and the lines thicker to give the impression i'm going for.
It's basically a 2 x 2 grid of squares that I want to expand out from the middle of the square on hover. Should I create a square with four separate squares or continue with my approach so far.
Thanks in advance.
Your code works correctly. If you want to hover and it'll expand from middle of square, don't use translate(-50%, -50%); when hover on square
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(2);
}
<div class="wrapper">
<div class="square"></div>
</div>
is it possible to create this patern in css with responsive design, so that background line is always at the right position and the right height no mather how big the size of the window is.
You can use pseudo-elements to create this, but to create perfect responsive circle you can use vh units on both height and width of circle. Then you can just use position: absolute and transform: translate() to position pseudo-elements.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.circle {
position: relative;
width: 60vh;
height: 60vh;
border-radius: 50%;
background: #E54B4B;
}
.circle:before,
.circle:after {
content: '';
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.circle:before {
transform: translate(-50%, -50%);
width: 100vw;
background: #B65657;
height: 20vh;
z-index: -1;
}
.circle:after {
height: 20vh;
width: 20vh;
background: white;
}
<div class="circle"></div>
I have an issue when im trying to make a picture resizable, i explain:
I have a div "overlay" that will fit the window;
Inside this div i have another div "imgActive" that will contain some pictures centered on the window;
Theses pictures inside has to fit the window no matter their size.
But, as you can see on this fiddle the picture inside fit horizontaly (the width change) but when you resize the window vertically, that doesn't resize at all (the height is still the same).
.overlay {
background: rgba(0, 0, 0, 0.7);
height:100%;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.imgActive {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
z-index: 1000;
}
.imgActive img {
max-height: 100%;
max-width: 100%;
}
What can i do to make it works? To change the height ?
Thanks for your time.
You can use css directly on img. This method maintains the Aspect Ratio of the Picture
Demo
http://jsfiddle.net/ykf6b5ot/
CSS (adjust the min and max % to suit the image size you like)
img {
max-width:70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Or you can use a single class
HTML
<div class="overlay">
<img class="image" src="https://pbs.twimg.com/profile_images/471998783933251584/IF367cAS.jpeg" alt="" />
</div>
CSS
.image {
max-width:50%;
max-height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/1w9s9wx7/
For the wrapper imgActive you do exactly the same as the image CSS and adjust the height/width % you like. 100% is full screen
CSS
.imgActive {
-webkit-transform: translate3d(0px, 0px, 0px);
height: 50%;
width: 50%;
z-index: 1000;
border:1px solid red;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/z69t00ns/
I'm currently aligning an image to the bottom of my div as well as centering it with the following css:
html:
<div class="hello">
<img src="http://bit.ly/1gHcL8T" class="helloImage" />
</div>
css:
.hello {
width: 80%;
height: 200px;
position: relative;
}
.helloImage {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
bottom: 0;
}
However, I want to make this image also responsive by giving it a width as percentage. How would I accomplish this?
JSFiddle:
http://jsfiddle.net/8e7UM/1/
If you're supporting modern browsers, you can do this.
.helloImage {
left: 50%;
bottom: 0;
width: 80%;
position: absolute;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
And here is the basic version, without the fancy transforms.
.helloImage {
left: 10%;
right: 20%;
bottom: 0;
position: absolute;
}