I have a problem using the translate css function.
I have HTML as below.
<div class="outer-div">
<img src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png"/>
<div class="inner-div">
Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum
</div>
</div>
You will notice that I have an outer div which has an image and an inner div with contents. I am pushing the inner div in negative y-axis by 40px using the translate CSS property. I am doing it using the sample css below:
.outer-div {
background-color: blue;
width: 400px;
height: auto;
}
img {
width: 100%;
height: auto;
}
.inner-div {
background-color: red;
width: auto;
height: 200px;
transform: translate(0, -40px);
}
However, by doing so, I now have a gap of 40px at the bottom of the div. I want to keep only 20px gap as shown in attached image.
How can I only have 20px at the bottom? I have also created a sample code-pen ( http://codepen.io/hellouniverse/pen/XNyzZX ) to show the issue
try this css:
.outer-div {
background-color: blue;
max-width: 400px;
height: 445px;
}
img {
width: 100%;
height: auto;
}
.inner-div {
background-color: red;
width: auto;
height: 200px;
transform: translate(0, -40px);
}
use this transform property to make 20px to 40px:
transform: scaleY(2);
the scaleY specifies the height and the (2) multiplies the given height "20px" to 40px.
Related
I have a div on which
max-width: fit-content;
width: auto;
is applied, Now when I am removing any of the properties I do not see any changes. So unable to figure what is the specific difference between the two properties. I tried reading around fit-content but couldn't understand.
If you're using display:block element, using max-width: fit-content will make a difference.
Works on Firefox with prefix. Caniuse
.a {
max-width: -moz-fit-content;
max-width: fit-content;
width: auto;
background: pink;
}
.b {
/* max-width: fit-content; */
width: auto;
background: yellow;
}
<div class="a">Lorem ipsum dolor </div>
<div class="b">Lorem ipsum dolor </div>
<!-- there is no difference if we are using inline or inline-block elements -->
<span class="a">Lorem ipsum dolor </span>
<span class="b">Lorem ipsum dolor </span>
I would like to darken the background images however text colors change, as well how Can I avoid it? I tried with background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(./img/1,jpeg) But in this case I have to add url at the end but it is not effiecent way since I have 4 images in this case.
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<div class="card-group">
<div class="card img1">
<div class="info">
<h5 class="card-title">Planning</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<div class="card img2">
<div class="info">
<h5 class="card-title">Customer Satisfaction</h5>
<p class="card-text">Lorem ipsum dolor .</p>
</div>
</div>
<div class="card img3">
<div class="info">
<h5 class="card-title">Build</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<div class="card img4">
<div class="info">
<h5 class="card-title">Analyse</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consetetur.</p>
</div>
</div>
</div>
CSS
.card{
min-height:30vh;
display: inline-block;
}
.card .info {
position:absolute;;
padding:0em 1em;
bottom:0.5em;
visibility:hidden;
color:#5383d3;
}
.card-title {
font-size:1.5em;
margin-bottom: .1em;
}
.card-text {
font-size:1em;
}
.card:hover{
-webkit-filter: grayscale(150%); /* Safari 6.0 - 9.0 */
filter: grayscale(150%);
}
.card:hover .info {
visibility:visible;
}
.img1{
background: url("./img/1.jpeg") no-repeat center center;
}
.img2{
background: url("./img/2.jpg") no-repeat center center;
}
.img3{
background: url("./img/3.jpeg") no-repeat center center;
}
.img4{
background: url("./img/4.jpg") no-repeat center center;
}
ANother problem is the white spacing between images even there is no border in my cs somehow it looks like there is
To use filters you will have to alter your html a bit.
<div class="card">
<div class="img1 img"></div>
<div class="info">
<h5 class="card-title">Planning</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
Now you can use your css like that:
.card {
position: relative;
}
.card .img {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
}
.card:hover .img {
filter: grayscale(100%);
}
You can't just change the background image without changing its content. You can use a pseude element as an overlay though. This has another advantage as you can animate more easily this way.
.card {
position: relative;
}
.card:before {
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: rgba(96, 69, 56, 0.5);
pointer-events: none;
}
The Problem for your second problem is an easy mistake that happens quite often. Display inline-block interprets white spaces between elements as it is expecting some inline behaviour. You can either get rid of all white spaces in your code between the div class="card" (sounds strange but works), or even better you use display: flex
.card-group {
display: flex;
justify-content: center;
}
.card {
flex-basis: 25%;
}
In example code block, there is a DIV name "left-line" (red color line). I need to stretch the height of that DIV according to "content" DIV's height.
Please I need to achieve this, Without having CSS "position" and "border" attributes. I'm using CSS flex.
.parent {
display: -webkit-flex;
/* Safari */
display: flex;
box-sizing: border-box;
background-color: orange;
}
.left-line {
width: 10px;
height: 100%;
background-color: red;
}
.content {
flex: 1;
padding: 0 0 0 14px;
letter-spacing: 1px;
line-height: 18px;
}
<div class="parent">
<div class="left-line">s</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text</p>
<p>Lorem Ipsum is simply dummy text of the printing...</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
Remove the height:100% from your .left-line class
.parent {
display: -webkit-flex;
/* Safari */
display: flex;
box-sizing: border-box;
background-color: orange;
}
.left-line {
width: 10px;
background-color: red;
}
.content {
flex: 1;
padding: 0 0 0 14px;
letter-spacing: 1px;
line-height: 18px;
}
<div class="parent">
<div class="left-line">s</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text</p>
<p>Lorem Ipsum is simply dummy text of the printing...</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
I want the green element to be under the text box and also under image.
I tried to set the z-index for each element, but nothing has changed.
Can I reach this through the z-index property?
I can't change html. And I also want the pseudo-element to be a child of the text block for the adaptive height
.item {
display: flex;
align-items: flex-start;
width: 400px;
height: 250px;
}
.col1 {
margin-right: 20px;
}
.col2 {
position: relative;
z-index: 1;
width: 200px;
height: auto;
padding: 5px;
background-color: gray;
}
.col2::before {
content: "";
position: absolute;
bottom: -20px;
left: -60px;
width: 150px;
min-height: 100px;
height: 100%;
z-index: -1;
background-color: seagreen;
}
.image {
position: relative;
z-index: 2;
width: 200px;
height: 150px;
}
<div class="item">
<div class="col1">
<img class="image" src="http://satyr.io/200x150/1" />
</div>
<div class="col2">
<p class="title">Lorem ipsum dolor</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima esse ipsam error repudiandae ut amet.</p>
</div>
</div>
Remove z-index: 1 from class .col2. So, the green block will appear under the image as well as the text box.
You could place an element inside <div class="col2"> because the pseudo element cannot have a lower z-index that the element itself. And then place an div inside of <div class="col2"> which you could apply the z-index and the gray background on.
I have a difference of box sizing interpretation between webkit and Firefox using height 100% on a parent.
HTML:
<header>
Lorem ipsum dolor amet
</header>
<div class="wrapper">
<div class="content">
My background depends on my ancestor sibling
</div>
</div>
<div class="red">
<p class="white">
Amet ipsum dolor
</p>
</div>
CSS:
header {
height: 150px;
background: #fff;
}
.red {
background: red;
padding: 6em 0;
}
.content {
background: rgba(28,28,28, .3);
margin-bottom: -100%;
}
.wrapper {
position: relative;
height: 100%;
}
p.white {
background: #fff;
width: 70%;
margin: 0 auto;
}
JS fiddle here https://jsfiddle.net/m1fobvwv/
Result on Chrome (expected):
Wrong result on FF:
A colleague of mine found a workaround:
Add position: absolute; width: 100%; to .content
Updated fiddle https://jsfiddle.net/m1fobvwv/3/