Right now I am overlaying color over an image inside a div.
CSS:
.thumb {width:300px;margin:auto;background:rgba(231, 207, 0, 0.5);}
.thumb img { display: block; }
.thumb:hover img { opacity: 0.5; }
HTML:
<div class="thumb">
<a href="url">
<img src="source"/>
</a>
</div>
How could I also overlay text on hover?
I found quite a few tutorials on this but am completely lost how to modify the current code to have text overlay as well.
You have to position text div abosolute and display it on hover.
.thumb {
width: 300px;
margin: auto;
background: rgba(231, 207, 0, 0.5);
position: relative;
}
.thumb img {
display: block;
width: 300px;
}
.thumb:hover img {
opacity: 0.5;
}
.overlay_text {
display: none;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
.thumb:hover .overlay_text {
display: block;
}
<div class="thumb">
<a href="url">
<img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" />
</a>
<div class="overlay_text">test</div>
</div>
Go-through the CSS and HTML i did. Its working.
Here is Demo:
.thumb {
background: rgba(231, 207, 0, 0.5);
display: table;
margin: auto;
width: 300px;
}
.thumb img {
display: block;
margin: 0;
position: absolute;
top: 7px;
}
.thumb:hover img { opacity: 0.5; }
.caption {
display: table-cell;
height: 300px;
margin: 0;
opacity: 0;
text-align: center;
vertical-align: middle;
width: 300px;
}
.thumb:hover .caption{ opacity:1;}
<div class="thumb">
<a href="url">
<p class="caption"> CAPTION</p>
<img src="http://placehold.it/300"/>
</a>
</div>
Related
As seen in example, position:relative; to parent (figure) and position:absolute; to child (figcaption) due to transform:scale(1.3); does not achieve desired result (figcaption to inside of bottom edge of the img). Any ideas how to tackle the issue?
.wrapper {
display: grid;
justify-content: center;
}
article {
max-width: 20rem;
margin: 3rem;
background-color: lightblue;
}
* {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
display: block;
}
figure {
position: relative;
}
figure img {
object-fit: cover;
height: 400px;
width: 100%;
transform: scale(1.3);
}
figcaption {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
h1 {
margin-top: 10rem;
}
<div class="wrapper">
<article>
<header>
<figure>
<img src="https://www.funcage.com/blog/wp-content/uploads/2016/07/Random-Photo-Dump-24.jpg" alt="Your Image">
<figcaption>Your caption text goes here.</figcaption>
</figure>
<h1>Main heading h1</h1>
</header>
<h2>Heading h2</h2>
<p>text text text</p>
</article>
</div>
I can't seem to change the width of my checklist. I'm trying to reduce the width and have some margin around the checklist item but it doesn't work. Here's what I have so far: https://jsfiddle.net/h64f1otw/1/
Snippet of my checklist:
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
columns: 2 4em;
}
.checkList li{
color: #fff;
}
I'm trying to achieve something like below:
what i did is adding display:flex for ul element and applying margin on li element with width:50% for each
to center your div you need to add margin:0 auto on heroInner class and remove padding on content class
.hero {
position: relative;
height: 44vh;
max-height: 64rem;
min-height: 28rem;
}
.background {
background-image: url('https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2851&q=80');
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
}
.overlay {
background: linear-gradient(to right, #1d1d1d, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
}
.inner {
display: table-cell;
width: 100%;
padding-top: 6rem;
padding-bottom: 6rem;
vertical-align: middle;
text-align: center;
}
.content {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media (min-width: 62.25rem)
{
.content {
padding-left: 3rem;
padding-right: 3rem;
}
}
.heroInner {
text-align: left;
max-width: 31rem;
margin:0 auto;
}
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.checkList li{
color: #fff;
margin-top: 30px;
}
.checkList li:nth-child(odd){
width:30%;
}
.checkList li:nth-child(even){
width:60%;
}
<div class="hero">
<div class="background"></div>
<div class="overlay">
<div class="inner">
<div class="content">
<div class="heroInner">
<div class="checkListContainer">
<ul class="checkList">
<li>Long term leases</li>
<li>Bespoke solutions</li>
<li>Multi city campaigns</li>
<li>Measuring success with data</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
So I have an image. I need to put a color overlay rgba(56, 59, 64, 0.7) on top of this image.
HTML:
<div class="home">
<img src="http://via.placeholder.com/350x150" />
</div>
CSS:
.home img {
width: 100%;
padding: 0;
margin: 0;
}
.home img {
width: 100%;
padding: 0;
margin: 0;
}
<div class="home">
<img src="http://via.placeholder.com/350x150" />
</div>
Here you go
.home {
}
img {
width: 100%;
padding: 0;
margin: 0;
display:block;
}
.wrap {
position:relative;
}
.wrap:before {
content:"";
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
background: rgba(0,0,0,0.5);
z-index:999;
}
<div class="home">
<div class="wrap">
<img src="http://via.placeholder.com/350x150" />
</div>
</div>
You can use pseudo-elements like before and absolute position it on top of the image
Added a blue background color for example purposes , so you can see it better, but you can use any color with opacity
img {
width: 100%;
padding: 0;
margin: 0;
}
.home {
position:relative;
}
.home:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,255,0.5);
}
<div class="home">
<img src="http://via.placeholder.com/350x150">
</div>
HTML
<div class="home">
<img src="mango.jpg" />
<div class="overlay"></div>
</div>
SCSS
.home {
position: relative;
img {
max-width: 100%;
padding: 0;
margin: 0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(56, 59, 64, 0.7);
}
}
I want to center-align and bottom-align an <img> in a container block. The <img> needs to be constrained to the container dimensions, so max-width:100% and max-height:100% are set on it. Also I need to align a label to the top-right corner of the <img>, which makes things more complicated.
I have a working version using display:inline-block and line-height (below):
.block {
line-height: 236px;
text-align: center;
width: 236px;
height: 236px;
background: rgba(255, 0, 0, .3);
}
.flex {
background: rgba(255, 0, 0, .3);
display: inline-block;
vertical-align: bottom;
position: relative;
line-height: 18px;
}
img {
display: block;
max-width: 236px;
max-height: 236px;
width: auto;
height: auto;
}
label {
position: absolute;
top: 0;
right: 0;
}
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/x7q4E80.png" />
<label>X</label>
</div>
</div>
<br>
<!-- 374 × 187 -->
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/dBy1WKI.png" />
<label>X</label>
</div>
</div>
View on Codepen
However this requires a reset on the line-height of the label. Is it possible to use a different method like display:table-cell to center and bottom-align the content?
My closest attempt is below:
.block {
display: table-cell;
vertical-align: bottom;
width: 236px;
height: 236px;
background: rgba(255, 0, 0, .3);
}
.flex {
background: rgba(255, 0, 0, .3);
display: table-cell;
vertical-align: bottom;
position: relative;
}
img {
display: block;
max-width: 236px;
max-height: 236px;
width: auto;
height: auto;
}
label {
position: absolute;
top: 0;
right: 0;
}
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/x7q4E80.png" />
<label>X</label>
</div>
</div>
<br>
<!-- 374 × 187 -->
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/dBy1WKI.png" />
<label>X</label>
</div>
</div>
View on Codepen
You can simplify your code same as like below.
.block1 {
background-color: red;
width: 100px;
height: 100px;
position: relative;
}
.block2 {
background-color: red;
width: 100px;
height: 100px;
position: relative;
margin-top: 10px;
}
.block1 a {
width: 20px;
height: 20px;
vertical-align: middle;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.block1 a label {
position: absolute;
top: 4px;
right: 0;
line-height: 0;
}
.block2 a {
width: 20px;
height: 20px;
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.block2 a label {
position: absolute;
top: 4px;
right: 0;
line-height: 0;
}
<div class="block1">
<div class="ctr-algn">
<a href="#">
<img src=".../images">
<label>x</label>
</a>
</div>
</div>
<div class="block2">
<div class="ctr-algn">
<a href="#">
<img src=".../images">
<label>x</label>
</a>
</div>
</div>
I hope you solve your issue.
HTML:
<div id="outer1">
<div class="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
<div id="outer2">
<div id="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
CSS2:
div { width: 100%; }
#outer1, #outer2 {position: relative;}
#outer1 .top { height: 200px; background-color: blue; }
#outer1 .base { height: 200px; background-color: yellow; }
#outer2 .top { height: 200px; background-color: green; }
#outer2 .base { height: 200px; background-color: yellow; }
.content {
width: 160px; margin: 0 auto;
position: relative; bottom: 250px; height: 300px; background-color: white; border: 1px solid black;}
This is the fiddle
The white, black-bordered div (.content) is supposed to sit on the split-coloured background (.bg) (as it is).
Using relative positioning - but the space i've told it to move up by (250px), is still been taken by it's parent (#outer1). (there's a gap between to the two 'outer' divs - they should be touching)
I tried absolute positioning but because the content div is taller than the relative content, the height is not honoured. And becuase it's dynamic content I cannot give it a fixed height (although i did for illustration)
One option is javascript, another is using a background-repeater for the top half.
Can it be achieved with pure CSS2?
Edit: Complete rewrite...
Here is the new fiddle: http://jsfiddle.net/FSXj8/14/
Okay so I took the liberty to start from scratch. Here is the html
<div id="outer1" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
<div id="outer2" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
And here is the CSS
div {
width: 100%;
}
.container {
height: 400px;
display: table;
position: relative;
}
.top, .base {
position: absolute;
left: 0;
height: 50%;
z-index: 0;
}
.top {
top: 0;
}
.base {
bottom: 0;
}
#outer1 .top {
background-color: blue;
}
#outer1 .base {
background-color: yellow;
}
#outer2 .top {
height: 50%;
background-color: green;
}
#outer2 .base {
height: 50%;
background-color: yellow;
}
.innerContent {
min-height: 100px;
border: 1px solid black;
background-color: white;
width: 100px;
}
.content {
display: table-cell;
position: relative;
vertical-align: middle;
z-index: 1;
background-color: transparent;
height: 100%;
}
Not sure if this is what you want, you said something about not using absolute:
.content {
width: 100px; margin 0 auto;
position: absolute; margin-top:-250px; height: 100px; background-color: white; border: 1px solid black;}
http://jsfiddle.net/FSXj8/7/