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>

Forcing other element's content to be moved by the same vertical amount

I have stumbled upon a frontend problem where I cannot figure out what the best approach is.
The simplified layout I need to achieve can be looked up here: https://jsfiddle.net/kw56sa84/
content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
position: relative;
transform: translateY(50%);
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9)
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>
Basically what I have are content and footer and there is a block that should be 50% in the body and 50% in the footer, and have both element contents moved by a dynamic half-height of the connecting element. In the jsfiddle example, the footer content should have some sort of padding. The height of all elements is dynamic.
The main question I suppose here is - is it possible to achieve this with CSS (solution may include grids, flexboxes), or am I out of luck and should seek a JS solution?
EDIT Here you can see a simplified design that should be achieved:
Thanks in advance!

Based on your explication you want that class: "end-of-body-block" be positionned dynamicly between body and footer.
The basic idea is to remove the red box from the normal flow by using position: absolute; but by doing that, it is loosing basic position strucutre. So we fix it with parent with position: relative;. Which is classic move.
To do so, I added position:relative; in .content:
.content{
position:relative;
}
And then I postionned absolute your red block as followed:
.end-of-body-block{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
EDIT
JS to add dynamic padding on content and footer.
DEMO:
var heightRed = document.getElementsByClassName('end-of-body-block')[0].offsetHeight;
heightRed = (heightRed / 2) + 2 + 'px';
var content = document.getElementsByClassName('content')[0]
var footer = document.getElementsByClassName('footer')[0]
content.style.paddingBottom = heightRed;
footer.style.paddingTop = heightRed;
.content{
position:relative;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
/*position: relative;
transform: translateY(50%);*/
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>

After a few hours of trial and error, I came up with an idea of how to solve this. It's a real hacky solution, but in my case it actually works, maybe someone else will find it useful.
So in my case the footer had an image background, thus making it more difficult to think of this, however.. solution here could be to simulate the same background as the other part where your element isn't.
To elaborate, instead of trying to move the other element's content, make it seem that it does so. I moved the red box to the footer instead, so it takes up the whole height it needs. Then add a pseudo (before) element as absolute to the red box's parent and make it full width and 50% of it's height. See here for example https://jsfiddle.net/co35svtd/4/
.content {
position: relative;
z-index: 0;
width: 100%;
display: inline-block;
}
.wrapper {
background: #eee;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.footer-block-wrapper {
position: relative;
}
.end-of-body-block {
width: 50%;
margin: 0 auto 0;
padding: 30px;
border: 1px solid #a00;
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
box-sizing: border-box;
z-index: 10;
}
.end-of-body-block:before {
content: '';
z-index: -1;
position: absolute;
height: 50%;
width: 100%;
top: 0;
left: 0;
right: 0;
background: #fff;
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
position: relative;
z-index: 100;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
</div>
<div class="footer">
<div class="footer-block-wrapper">
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
Links and other information that should be visible
</div>
</div>
I know it's not the answer I was looking for, but this hack does the job for me.

Trying to center a link in CSS with the top header but wont move

Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>

Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.

General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)

If you want to align the links vertically:
#header a {
...
line-height: 80px;
}

#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.

You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg

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/

JQuery Rounded Corners Implementation

I have a rather crude implementation of corners for (main_bg.gif) within the wrapping global-inner div. Although now this functions with inner divs to represent each corner, I was told its not the best implementation, so if anyone has a cleaner solution, well that would be great!
The bottom corner images utilize: margin-top: -8px;
You can see this inner image (very light blue) with its corners: http://www.davincispainting.com
Also I cant utilize CSS3 unfortunately.
Here is the HTML:
<body>
<div id="global-wrap>
<div id="global-inner">
<div class="topleft">
</div>
<div class="topright">
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<br style="clear: both" />
<div id="bottom-wrap"></div>
<div class="bottomleft">
</div>
<div class="bottomright">
</div>
</div>
</div>
</body>
Here is the relevant CSS:
body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#global-wrap
{
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft
{
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright
{
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft
{
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
width: 9px;
}
#global-inner .bottomright
{
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
width: 9px;
}
How would I implement this Corner for 2 CSS items?
<script type="text/javascript">
$('#global-inner').corner('15px');
</script>
#global-inner
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/
width:536px;
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;
}

Use jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1

.rounded {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
Hope that helps :)

You can use the the jQuery Curvy Corners Plugin.
It will use in modern Browsers the CSS3 Version, but with browsers without the css3 border-radius (IE aso) the plugin create the border radius with javascript.