The good old problem of vertically aligning an img!! I've managed it but by the looks of it, it doesn't work on safari! Has anyone got anyother ways of doing it?
Code:
<div class="logo">
<img alt="" src="img/logo-white.png">
</div>
.logo {
padding-top:2.5%;
height: 104px;
}
.logo img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Thanks
Since the height of the div is fixed, you can cut off the nasty tricks, and simply equal the line-height to the height value.
.logo {
padding-top:2.5%;
height: 104px;
outline: 1px solid red;
line-height: 104px;
}
<div class="logo">
<img alt="Meazey Web design" src="img/logo-white.png">
</div>
first of all, to use css3 'transform' you need to use the safari & chrome prefix:
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
it depends on the safari version, it will be supported from version 7.1 and up: http://caniuse.com/#search=transform
there is more then two ways to do it but let's take a look on two for now:
1)
.logo {
height: 104px;
position: relative;
}
.logo img
{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
2)
.logo
{
height: 104px;
}
.logo > a
{
display: table-cell;
vertical-align: middle;
height: inherit;
}
Related
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
I need to create an image gallery, in which the individual images are irregular triangles (emphasis on irregular).
I found limited examples on how to achieve triangle images via html and css, without modifying the images themselves. One example I found in this CodePen https://codepen.io/thebabydino/pen/liDCz was a step in the right direction, but looking at it, I can't find a way to make the images irregular triangles.
The result I am trying to achieve is this:
<div class='pageOption'>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/A.png'>
</a>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/D.png'>
</a>
</div>
This is the basic HTML I will be using and the CSS is:
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em;
height: 27em;
}
.option, .option img {
width: 100%;
height: 100%;
}
.option {
overflow: hidden;
position: absolute;
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
opacity: .75;
transition: .5s;
}
.option img:hover {
opacity: 1;
}
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
Mind that the HTML and CSS I have may not be the optimal for my problem. I think the shape of the images I am using (rectangular) have something to do with this.
Would be better if the solution is better supported across browsers.
You can do it with skew like below if you cannot use clip-path:
.box {
overflow: hidden;
width: 200px;
height: 200px;
display:inline-block;
}
.triangle {
width: 100%;
height: 100%;
transform: skewX(-20deg) skewY(45deg); /* 27deg instead of 20deg to have a regular triangle */
transform-origin: bottom left;
overflow: hidden;
background-size:0 0;
}
.triangle.bottom {
transform-origin: top right;
}
.triangle:before {
content: "";
display: block;
width: inherit;
height: inherit;
background-image: inherit;
background-size:cover;
background-position:center;
transform: skewY(-45deg) skewX(20deg); /* We invert order AND signs*/
transform-origin: inherit;
}
.triangle:hover {
filter:grayscale(100%);
}
.adjust {
margin-left:-120px;
}
body {
background:#f2f2f2;
}
<div class="box">
<div class="triangle" style="background-image:url(https://picsum.photos/id/155/1000/800)"></div>
</div>
<div class="box adjust">
<div class="triangle bottom" style="background-image:url(https://picsum.photos/id/159/1000/800)"></div>
</div>
I want to place an overlay on my rounded image but when I set it, the overlay doesn't display over the image correctly? It is filling the column div. Not the overlay container. Can the overlay container be made to size to the image inside of it? I have tried display:inline-block;but that doesn't work. I am using Bootstrap.
HTML Code
<div class="row" style="background-color:#ECECEC">
<div class="col-md-4 col-sm-4" >
<div class="overlaycontainer">
<img class="roundimg" src="images/george1x1.jpg" >
<div class="overlay">
<div class="overlaytext">Hello World</div>
</div>
</div>
<center><h3>George Jones <br><small>Owner and Founder</small></h3></center>
</div>
CSS
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.roundimg{
max-width: 75%;
height: auto;
border-radius: 50%;
padding-top:10px;
display: block;
margin: 0 auto;
}
Any help would be appreciated.
Thanks
Joe
I was able to get this working a bit better by making this working demo with a placeholder image I was able to link to.
http://codepen.io/anon/pen/ryYaWx?editors=1100
and then adding position: relative to the .overlaycontainer selector, like this:
.overlaycontainer {
display: inline-block;
position: relative; /* <-- this was added*/
}
This works because you have .overlay set to position: absolute and you want the absolute positioning to be relative to .overlaycontainer instead of the entire page. Adding this line will do that.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have recently started to code again after a long break and now I'm trying hard to see what is it that I'm doing wrong.
I made a JSFiddle here: http://jsfiddle.net/mtsgp3gg/
This is the output I'd like to see: http://puu.sh/jwi3d/233c917986.png
I have a container with 3 images:
<div class="container">
<img src="main picture">
<img id="tape left" src="">
<img id="tape right" src="">
</div>
I would like to put some little "tape thingies" over my main picture using position: relative; and top:0; but so far I failed.
Can anyone point out what I'm doing wrong please?
css position: is somewhat confusing, especially at the start (and it is misused almost 99% of all times).
You use position: relative because you want it to be relative to the container, right? Although this is the obvious behavior, it is not what css does.
position: relative means "I'll give you top/right/... values and want that the element is moved by that amount from where it would occur normally."
You almost always want to use position: absolute which basically means "pick the boundaries of the parent (being specific: the first parent that is not position: static which is the default) and move this element to what I define with top/right/...". (There are more implications like absolute removing the element from the document flow, but that's out of scope at the moment.)
This means you have to
position your container not static. position: relative works fine here, as it does not alter the element if you don't specify top/... .
position your items with position: absolute as they will then be defined relative to their container (not relative to their original position, as they would be with position: relative).
Your example would look like
body {
background: gray;
}
.container {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
}
.container [id] {
position: absolute;
top: -5px;
}
.container #one {
left: -5px;
}
.container #two {
right: -5px;
transform: rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg">
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
</div>
You're using position:relative when you should be using position:absolute.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container #one {
position: absolute;
top: 0;
left: 0;
transform: translate(-25%, -25%)
}
.container #two {
position: absolute;
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
</div>
That said, I'd prefer not to have presentational images in the HTML at all. So I'd be using pseudo-elements using the same techniques.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container::before {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 0;
transform: translate(-25%, -25%);
z-index: 1;
}
.container::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
</div>
In this way, the presentational part is now in the CSS and the class can be re-used without having multiple instances of the tape image cluttering up your HTML.
Try to use position: absolute; instead of position: relative;
.container #one{
position: absolute;
top: 10px;
left:20px;
}
.container #two{
position: absolute;
top: 10px;
left:215px;
transform: rotate(90deg);
}
Demo here
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/