Develop Reference

Overlap text over an image, and as screen is being decreased, change color of overlapping letters

I'm trying to achieve this effect:
And as the screen is being reduced in size, and more letters of my H1 start to overlap the image, I would like them to change color to white. Eventually, when the screen is small enough, the text can just be inside the container that has a background image.
Here's the code I have so far:
.container {
max-width:1350px;
margin:0 auto;
background-image: url(https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
padding-top:15em;
padding-bottom:15em;
position:relative;
}
.overlay {
background-color: transparent;
background-image: linear-gradient(90deg, #FFFFFF 30%, #F2295B00 0%);
opacity: 1;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
h1 {
font-size:60px;
letter-spacing:9px;
text-transform:uppercase;
}
.custom-cta {
display:block;
max-width:100px;
margin-top:10px;
text-align:center;
background:gold;
padding:20px 40px;
}
<div class="container">
<div class="overlay">
<div class="text-box">
<h1>Complete </br>Remodeli<span style="color:white;">ng</span></h1>
<p style="max-width:300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
</div>

I would solve this by making layers. Consider having 2 layers:
A front layer with black text
A back layer with white text and the image.
Now the trick is getting the texts of both the texts to overlap perfectly. Use CSS Grid to create the layout and place the text and image where you need them. With some creative clipping (overflow: hidden) and layer ordering (z-index) you can control where the black text stops and where the white continues.
This will create an illusion of the color changing based on the screen size.
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
max-width: 1350px;
width: 100vw;
height: 100vh;
}
.layer {
grid-area: 1 / 1;
display: grid;
grid-template-columns: 30vw 70vw;
}
:is(.layer--front, .layer--back) .layer__title {
display: block;
font-weight: 700;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
margin: 0 0 1rem;
}
.layer--front {
z-index: 2;
}
.layer--front .layer__title {
color: black;
}
.layer--back .layer__title {
color: white;
}
.layer__content {
grid-area: 1 / 1;
padding: 6rem 2rem;
z-index: 1;
}
.layer--front .layer__content {
overflow: hidden;
}
.layer__image {
grid-area: 1 / 2;
position: relative;
}
.layer__image img {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
padding: 1rem 1rem 1rem 0;
object-fit: cover;
object-position: left;
}
.custom-cta {
display: block;
margin-top: 10px;
text-align: center;
background: gold;
padding: 10px 20px;
}
<div class="container">
<div class="layer layer--front">
<div class="layer__content">
<h1 class="layer__title">Complete <br>Remodeling</h1>
<p style="max-width: 300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
</div>
<div class="layer layer--back">
<div class="layer__content">
<span class="layer__title" aria-hidden="true">Complete <br>Remodeling</span>
</div>
<div class="layer__image">
<img src="https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg" alt="" />
</div>
</div>
</div>
Be sure to watch the example in Full page mode.

Here is an approach using flexbox, three overlapping containers, and backdrop-filter: invert(100%).
Basically, the solution is to create three overlapping containers (using z-index) to put one on top of the other.
The image goes as a background image on the under container. The image is then inverted using backdrop-filter: invert(100%) twice to avoid getting a negative. However, when when the text slides over the top of the image, then it is inverted only once, giving the sliding negative effect that is asked for.
The effect is best seen in a fiddle of the solution below as the vertical bar can be dragged left or right to see the sliding effect.
The yellow button changes to blue on sliding over the image, but I am sure that this is not a critical issue.
:root {
--image-height: 500px;
--image-width: 600px;
--top-offset: 350px;
--sidebar-width: 100px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
h1 {
margin-top: 50px;
font-size: 60px;
letter-spacing: 9px;
text-transform: uppercase;
}
p {
max-width: 300px;
}
.text-container {
margin-left: 20px;
}
.container {
display: flex;
align-items: stretch;
height: var(--image-height);
position: relative;
}
.sidebar {
flex: 1 1 var(--sidebar-width);
height: var(--image-height);
}
.image {
flex: 0 0 var(--image-width);
height: var(--image-height);
}
.container-under {
top: calc(0px - var(--top-offset));
z-index: -2;
}
.image-under {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg");
background-size: cover;
}
.container-middle {
top: calc(0px - calc(var(--top-offset) + var(--image-height)));
z-index: -1;
}
.image-middle {
background-color: transparent;
backdrop-filter: invert(100%);
}
.container-over {
top: calc(0px - calc(var(--top-offset) + var(--image-height) * 2));
}
.image-over {
background-color: transparent;
backdrop-filter: invert(100%);
}
.custom-cta {
display: block;
margin-top: 10px;
background: gold;
padding: 10px 20px;
width: 150px;
}
<div class="text-container">
<h1>Complete<br/>Remodeling</h1>
<p>With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a class="custom-cta">Contact Us</a>
</div>
<div class="container container-under">
<div class="sidebar"></div>
<div class="image image-under"></div>
</div>
<div class="container container-middle">
<div class="sidebar"></div>
<div class="image image-middle"></div>
</div>
<div class="container container-over">
<div class="sidebar"></div>
<div class="image image-over"></div>
</div>

calculating border radius for a small width with css

I want to create a slider for progress
if say it's at 1% how can I calculate the right px/% for the border-radius?
when it's a big % it looks good
<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 15%" />
</div>
when it's small like 1% it looks like this
<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>

try adding:
overflow: hidden;
for your green filler. It will hide inside the container. What you're trying to do is close to impossible. Can you imagine adding a border-radius on an element that is < 2px in width?
<div style="background: grey;
height: 25px;
border-radius: 12.5px;
width: 100%;
overflow: hidden;">
<div style="background: green;
height: 25px;
border-radius: 12.5px;
width: 1%" />
</div>

A 1% is supposed to look small in my opinion. just add overflow: hidden to your parent div, then that should look better.
<div style="overflow:hidden; background: grey; height: 25px; border-radius: 12.5px; width: 100%">
<div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>

If you would like to completely keep the radius of the progress bar, you may try cloning a same element as the progress bar container and set its left.
This example is working with Javascript or you may use pure css only by editing its left.
Please see if this is your another good choice as well.
set_progress(2); // percentage of progress
function set_progress(p) {
$('.progress-container span').css('left', (p-100)+'%');
}
.progress-container {
position: relative;
display: block;
width: 100%;
height: 24px;
background-color: #555;
border-radius: 12px;
overflow: hidden;
}
.progress-container > span {
position: absolute;
display: block;
top: 0;
left: -100%;
width: 100%;
height: 24px;
background-color: #0c0;
border-radius: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-container">
<span></span>
</div>

You are losing the border-radius because you are altering the width of your green progress element.
Instead, if you set the green div to the same 100% width, you can represent the progress by using CSS transform to move the green div to the left.
transform: translateX(-90%);
This is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) and so on.
Use overflow: hidden; on the outer div to hide the extra green.
.progress-bar {
overflow: hidden; /* hide the green that overflows */
background: grey;
height: 25px;
width: 100%;
border-radius: 12.5px;
}
.progress {
display: block;
background: green;
height: 100%;
width: 100%; /* same width as outer div */
border-radius: 12.5px;
transform: translateX(-90%); /* this is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) */
}
<div class="progress-bar">
<div class="progress"></div>
</div>

Changing display of elements in hover of another element does not work as it should

I want to change the display of the elements with the .slide-prev and .slide-next classes. As I'm using a slide plugin, it automatically creates the navigation elements outside the ul, so the only way the display change worked was with javascript. The problem is that it did not work as it should.
When I move the mouse over the div with the class .intro-noticias the elements appear, and when I leave they disappear, so far so good. The problem is when I hover over the elements .slide-prev and .slide-next, they are shaking, disappearing depending on where the arrow is and do not activate the hover.
It may be that I let something simple go by, but I really have not found it, if anyone knows what's causing it, I appreciate it.
Video demonstrating the problem
$(".intro-noticias").hover(function() {
$('.slide-prev,.slide-next').css("display", "block");
}, function() {
$('.slide-prev,.slide-next').css("display", "none");
});
.intro-noticias {
width: 100%;
height: 85vh;
margin-top: 70px;
}
.slide-prev {
z-index: 20;
position: absolute;
top: 70px;
left: 0;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-prev:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
left: 2px;
display: block;
background: url("img/icones/previous.png") left center no-repeat;
}
.slide-prev:hover {
background: red;
transition: all 0.2s ease-in;
}
.slide-next {
z-index: 20;
position: absolute;
top: 70px;
left: 40px;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-next:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
right: 2px;
display: block;
background: url("img/icones/next.png") right center no-repeat;
}
.slide-next:hover {
background: red;
transition: all 0.2s ease-in;
}
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next

You can wrap ul and anchors into the <div class="cont"> and bind events mouseenter and mouseleave to this div.
<div class="cont">
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
</div>
$(".cont").mouseenter(function() {
$('.slide-prev,.slide-next').css("display", "block");
});
$(".cont").mouseleave(function() {
$('.slide-prev,.slide-next').css("display", "none");
});

Vertical spacing (line height) with BigText

I am trying to implement bigtext on a dynamic container. I get this to work with fittext neatly but I like the resizing of bigtext better.
Does anyone know how to prevent the text overlap with bigtext?
This is the bit of HTML test code:
<div id="fittextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
<div id="fittext" class="containerText">
Fittext. Make better decisions where location matters
</div>
</div>
<div id="bigtextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
<div id="bigtext" class="containerText">
<span>BigText</span><span>Make better</span><span>decisions where location matters</span>
</div>
</div>
This is the CSS:
#fittextContainer {
position: relative;
width: 100%;
height: auto;
background-size: cover;
}
#bigtextContainer {
position: relative;
width: 100%;
height: auto;
background-size: cover;
}
.imgTower {
width: 100%;
height: auto;
}
.containerText {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: auto;
width: 80%;
height: auto;
text-align: center;
color: white;
line-height: 1em;
font-weight: 700;
opacity: 0.8;
text-shadow: 3px 3px #3f51b5;
}
And this is how it looks like:

Hi There. It's difficult to test it for myself because I don't have the measures of your image (It would be nice if you could write it down). First of all, I would recommend you to integrate the image in the div with the css line:
background-image: url();
You can also try to use some padding and don't use a solid value (like x em) or something sometimes instead of auto. Auto messes many things up in my experience.
Cheers,
Daniel.

Ok, I got this fuzzed out now. Line height needs to be set to normal and the page is game.
line-height: normal;
I previously removed the line-height property completely and assumed that normal would be the default value for line-height. But this doesn't seem to be the case. Or I might have changed the presumed default by using normalize CSS.
I also removed the height: auto instructions which are not required to make this work.
Here is the updated html:
<div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
<div id="fittext" class="containerText">Make better decisions where location matters</div>
</div>
<div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
<img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
<div id="bigtext" class="containerText"><span>Make better</span><span>decisions where location matters</span></div>
</div>
Here is the updated CSS:
.imgContainer {
position: relative;
width: 100%;
background-size: cover;
}
.imgTransparent {
width: 100%;
}
.containerText {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: auto;
width: 80%;
text-align: center;
color: white;
line-height: normal;
font-weight: 700;
opacity: 0.8;
text-shadow: 3px 3px #3f51b5;
}
Here is the result (fittext on top):

How to make titles with background?

I want to make a title overlay an image. That's easy, but I want it to be a certain width, and have the text in blocks. Here's an image of what I want:
I'd like to do this in CSS if possible, but I'm fine with using Javascript.

See a live example here. Try this:
HTML:
<div>
<span>Hello world</span><br>
<span>More text here</span>
</div>
​CSS:
div {
width: 400px;
height: 400px;
background-image: url(http://www.hotels.tv/london-hotels/images/destinations/1/w97654_8.jpg);
background-repeat: no-repeat;
background-image-width: 100%;
}
div span {
font-size: 30px;
position: relative;
top: 100px;
background-color: gray;
color: white;
}
​
EDIT
In this example, the text is aligned to the bottom by using display: table-cell and vertical-align: bottom on the parent
EDIT 2
For a transparent background, use rgba(), as in this example
EDIT 3
To align the text right, set text-align: right on the parent, as in this example

Might need a little tweaking to get it exactly how you want to look but here's a starting point.
<style>
#image_container {
position: relative;
background-image: url(path/to/image) no-repeat;
width: 500px;
height: 500px;
}
#image_container .title {
position: absolute;
top: 300px;
background: #000;
background: rgba(0,0,0,0.75);
color: white;
font-size: 30px;
font-weight: bold;
}
</style>
<div id="image_container">
<div class="title">
<p>Some Text</p>
</div>
</div>

jsFiddle demo
HTML:
<div id="background">
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</div>
CSS:
#background {
background: url(http://css-tricks.com/examples/TypeOverImage/images/3754004820_91a5c238a0.jpg) no-repeat;
width: 400px;
height: 300px;
}
span {
position:relative;
clear:both;
float:left;
color:#fff;
font-size:23px;
font-weight:bold;
top:150px;
margin-top:-2px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.7);
padding: 5px 15px;
}

This might get you started: http://jsfiddle.net/FyL6J/
There is no reason why this has to be done using jQuery, but I find .position() to be helpful.

Something like this? http://jsfiddle.net/EcXZZ/

The first and simplest way I see to do so would be to get a png image with desired opacity, by example a 1x1 RGB(0,0,0) pixel with 40% opacity for the title background and set your CSS this way :
<style>
.image_holder
{
position: absolute;
left: 10px;
top: 10px;
}
.image_holder > img
{
position: absolute;
left: 0;
top: 0;
}
.image_title_overlay
{
position: absolute;
left: 0;
top: 120px;
background-image: url('images/black.40%opacity.1x1.png');
color: 'white';
padding: 10px 12px;
}
</style>
<div class="image_holder">
<img src="image_url.jpg"/>
<p class="image_title_overlay">A Movie in the Park: <br/>Kung Fu Panda</p>
</div>

I would use rgba... basically like this:
span {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 17px;
}
http://jsfiddle.net/TCtR5/3/