I want to middle align 2 divs. I have tried many answers on SO but no success.
Can anyone please help?
.image-container {
position: relative;
width: 120px;
height: 120px;
}
.upload-text-wrapper {
background-color: rgba(248, 247, 216, 0.7);
width: 120px;
height: 120px;
position: absolute;
top: 0;
opacity: 0;
}
.upload-text-wrapper:hover {
opacity: 1;
}
<div class="image-container">
<img class="image-frame" src="http://www.telecomwiz.com/wp-content/uploads/2015/03/free-stock-photo-brick-wall-imageslive-decorating-a-white-brick-wall-decoration-picture-white-brick-wall-120x120." />
<div class="upload-text-wrapper">
<div class="upload-button-icon">X</div>
<div class="upload-button-title">control 1</div>
</div>
</div>
I want to align upload-button-icon and upload-button-title in middle both vertically and horizontally on hover without changing the existing html structure.
Something like this:
.upload-button-icon, .upload-button-title {
text-align:center;
transform: translateY(35px);
}
https://jsfiddle.net/xs0gc0r2/4/ Note: you can change translateY value to fit your needs... Note2: not sure about css/ how you will style these divs, some tweaks will be needed, probably. This works with provided html/css...
Maybe it's good to use this variant that does not use CSS3:
You can support older browsers and won't have to adjust the translateY-value when the image size changes.
.image-container {
width: 120px;
height: 120px;
display: table;
}
.image-frame {
position: absolute;
z-index: -1;
}
.upload-text-wrapper {
background-color: rgba(248, 247, 216, 0.7);
text-align:center;
vertical-align: middle;
display: none;
}
.image-container:hover .upload-text-wrapper{
display: table-cell;
}
<div class="image-container">
<img class="image-frame" src="http://www.telecomwiz.com/wp-content/uploads/2015/03/free-stock-photo-brick-wall-imageslive-decorating-a-white-brick-wall-decoration-picture-white-brick-wall-120x120." />
<div class="upload-text-wrapper">
<div class="upload-button-icon">X</div>
<div class="upload-button-title">control 1</div>
</div>
</div>
Related
It's a little bit hard to explain, that's why i also can't find the answer on Google.
I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:
1+2: combined transparent color background
3+4: combined transparent color background
1+2+3+4: combined background image (lowest layer)
Does anyone know if this is possible and how? Thanks for your help!
Yes, using the techniques outlined in this question but extending it to the columns.
The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
/* prevent scrollbar */
}
.container {
width:50%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
}
.extra:before {
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
}
[class*="col"] {
border: 2px solid grey;
min-height: 120px;
position: relative;
}
.left:before {
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
}
.right:before {
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
}
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>
Codepen Demo
I think i figured it out.. Thanks to Paulie_D
Very simple example:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth {
background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
display:table;
width:100%;
}
.cell{
display:table-cell;
vertical-align:top;
}
.red20{
background-color:rgba(255,0,0,0.2);
}
.red50{
background-color:rgba(255,0,0,0.5);
}
Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/
I have something like this
<div class="container">
<div class="img-container">
<img class="thumbnail" src="https://via.placeholder.com/250x250" />
<div classe="img-icon-container">
<i class="photo-icon fas fa-camera-retro" />
<span>10</span>
</div>
</div>
</div>
.container{
height: 200px;
display: flex;
margin-bottom: 20px;
.img-container {
position: relative;
.thumbnail {
height: 100%;
}
.img-icon-container {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
background-color: rgba(110, 110, 110, 0.8);
i {
margin-left: 5px;
margin-right: 5px;
font-size: 20px;
color: white;
}
&:hover {
background-color: blue;
}
}
}
}
In chrome it looks as I wanted.
but in IE 11 & FF
What do I need to add to keep the gray bar contained in the div?
Instead of width:100%; just add right:0;. This will always keep the edges of the inner box against the left and right sides.
The problem is the fixed height of the .container. If you have control of the sizing of these images I would just remove the fixed height of the .container and display: block; on the image to remove the spacing under it.
If you need it to accomodate varying aspect ratios then it's more complicated and there's never a perfect solution that looks neat.
Okay, so I thought that the grid was perfectly aligned to the center, only to realise that it was a few pixels out. I completely stripped all of my attempts at centering and looked online but couldn't find anything.
I know I can use CSS Grids, Flexbox etc. but I am trying to learn how to create websites without using any aid. So I can learn the reasoning behind things.
Fiddle:
https://jsfiddle.net/8L9ye7nj/5/
Grid HTML:
<div class="box-wrapper">
<div class="box-container">
<div class="box" id="stethoscope">
<div class="box-label">
<p>Book an appointment</p>
</div>
</div>
<div class="box" id="prescription">
<div class="box-label">
<p>Request a repeat prescription</p>
</div>
</div>
<div class="box" id="group">
<div class="box-label">
<p>Join the Patient Group</p>
</div>
</div>
</div>
</div>
Grid CSS:
.box {
float: left;
width: 25%;
height: 300px;
background-color: #252625;
color: #FFF;
position: relative;
padding: 15px;
margin: 0.5%;
}
.box-label {
position: absolute;
bottom: 0;
text-align: center;
background-color: rgba(0,0,0,0.5);
width: 100%;
padding: 7px 0;
left: 0;
}
.box-label:hover {
animation: box-stretch 1s forwards ease-in-out;
cursor: pointer;
}
.box-container {
width: 90%;
}
.box-container::after {
content: "";
clear: both;
display: table;
}
.box-wrapper {
background-color: #B21645;
padding: 30px;
}
How can you divide the box and center them?
You can use calc to use mathematical expressions to calculate height, widths etc in css. You can divide the width by three here for the box.
.box {
display: inline-block;
width: calc(100% / 3);
}
Things to consider
Mind the space between inline-block elements. You can read more about
that here.
Avoid using floats as much as possible. Most layouts done with float can be achieved with inline-block. Floats are simply meant to take an element, put it to one side, and let other content flow around it. That’s all.
box-wrapper and box-container either one is only needed to wrap the contents inside.
Code Snippet
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.box-wrapper {
background-color: #b21645;
padding: 20px;
}
.box {
position: relative;
display: inline-block;
width: calc(100% / 3);
padding: 0 10px;
height: 300px;
overflow: hidden;
}
.box img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
.box-label {
position: absolute;
bottom: 0;
width: calc(100% - 20px);
text-align: center;
background-color: rgba(0, 0, 0, .6);
padding: 10px 0;
transition: padding 0.3s;
}
.box-label:hover {
padding: 25px 0;
}
.box-label p {
font-family: Helvetica;
color: white;
font-size: 20px;
}
<div class="box-wrapper">
<div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="" />
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div>
</div>
It's a little bit hard to explain, that's why i also can't find the answer on Google.
I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:
1+2: combined transparent color background
3+4: combined transparent color background
1+2+3+4: combined background image (lowest layer)
Does anyone know if this is possible and how? Thanks for your help!
Yes, using the techniques outlined in this question but extending it to the columns.
The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
/* prevent scrollbar */
}
.container {
width:50%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
}
.extra:before {
content: '';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
}
[class*="col"] {
border: 2px solid grey;
min-height: 120px;
position: relative;
}
.left:before {
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
}
.right:before {
content: '';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
}
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>
Codepen Demo
I think i figured it out.. Thanks to Paulie_D
Very simple example:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth {
background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
display:table;
width:100%;
}
.cell{
display:table-cell;
vertical-align:top;
}
.red20{
background-color:rgba(255,0,0,0.2);
}
.red50{
background-color:rgba(255,0,0,0.5);
}
Link to jsfiddle: https://jsfiddle.net/DTcHh/14045/
I have the following html:
<div class="article">
<img src="..." class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.
Also the height of the article div should always be 180px, I only have the following simple CSS:
.article {
height: 180px;
padding: 10px;
background-color: blue;
}
Thanks in advance for any tips!
You can do it by this way:
<div class="article">
<img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
Ad some more css below:
.article{
height: 180px;
padding: 10px;
background-color: blue;
overflow:hidden;
}
.article img{
position:absolute;
z-index:0;
width: 100%; // make the img fluid
height:200px;
margin:-10px;
object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
position:relative;
z-index:1;
}
Test it on jsfiddle:
http://jsfiddle.net/sarowerj/o9L72do0/
What you're looking for in z-index.
Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.
You do specify a z-index as follows in the CSS:
.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }
See this jsFiddle for a demo on how to use it:
You can use the CSS property object-fit for this.
However it is worth noting that this property has very little to no support on IE and Edge browser.
.conainer{
position: relative;
width: 500px;
height: 300px;
color: #ffffff;
overflow: hidden;
margin: auto;
}
.conainer img{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease;
}
.conainer:hover img{
transform: scale(1.2);
}
.conainer .content{
position: relative;
z-index: 1;
}
.conainer .content h2{
color: white;
text-shadow: 3px 2px 10px #545454;
text-align: center;
}
<div class="conainer">
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div class="content">
<h2>Here's an example</h2>
</div>
</div>
You can use this code, to make <img> behave like a background image:
<img src="..." class="background-image" />
.background-image {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
use
<div class="article" style="background: url(imageurl)">
</div>