Invert colors of title over an image - html

Here is my current HTML:
.titleText {
font-family: Hacked;
font-size: 8rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
}
.titleContainer {
position: relative;
}
body {
margin: 0;
}
<!DOCTYPE html>
<div class="titleContainer">
<img src="assets/ethan.png">
<h1 class="titleText">Ethan Brand</h1>
</div>
I want the text over the image to be the "opposite of transparent", inversing the color behind each pixel of text.
I found this: How can I invert color using CSS?
but that changes all of the text, not taking the inverse of each pixel.
Thanks!


Use mix-blend-mode: difference; with color: white on the text:
.titleText {
font-family: Hacked;
font-size: 8rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
mix-blend-mode: difference;
color: white;
margin: 0;
}
.titleContainer {
position: relative;
}
body {
margin: 0;
}
<div class="titleContainer">
<img src="https://picsum.photos/800/400">
<h1 class="titleText">Ethan Brand</h1>
</div>

Related

How to Overly Text and Button on an Image

I'm trying to place Text and button on an image like this. Can someone help with this.
this is what I have tried. The thing is it does render properly in outlook email
CSS:
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #55A646;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: #55A646 ;
}
HTML:
<div class="container">
<img src="http://image.com" alt="" style="width:100%">
<button class="btn">Button</button>
</div>

Folow The link: https://www.w3schools.com/howto/howto_css_image_text.asp
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom center text */
.bottom-center {
position: absolute;
bottom: 8px;
left: 45%;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-760x400.png" alt="Snow" style="width:100%;">
<div class="bottom-center">
<button>Bottom Center</button>
</div>
<div class="centered">Centered</div>
</div>

try this instead,
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: 100%
}
.container .btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #55A646;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: #00cc00 ;
}
h4{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
background:#111;
padding: 7px;
}
<div class="container">
<img src="https://i.stack.imgur.com/bf3jO.png" alt="" style="width:100%">
<h4>The table Fan</h4>
<button class="btn">Fan</button>
</div>

float text on second image to the left

I have three images with text over them. I want to have text for first and third images to be floated to the left, and the second one to be floated to the right. I got the first and the third images to work, but I am struggling with the second image. I have been looking around but couldn't find any help. and also, I am new to html & css, so I would appreciate if someone could help.
<style>
.image {
position: relative;
width: 100%;
}
h2{
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.h2:nth-of-type(2){
position: absolute;
bottom: 200px;
left: 200px;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.overlay-image {
position: relative;
}
.overlay-image .image {
display: block;
}
.overlay-image .text {
color: #81282A;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.overlay-image:hover .hover {
opacity: 1;
}
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.8);
}
.pp{
color: white;
}
#store-container {
position: relative;
width: 100%;
}
#store-image {
opacity: 0.3;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
#store-middle {
transition: .5s ease;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
#store-text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.TEXT{
position: relative;
width: 831px;
height: 134px;
left: 180px;
top: 56px;
padding-top: 10px;
margin-bottom: 15%;
font-style: normal;
font-weight: 300;
font-size: 35px;
line-height: 47px;
text-align: center;
color: black;
}
</style>
<div class="image"><img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/smart_large.jpg?v=1562170226" width="1179" height="480" alt="Alt text" />
<h2><span>Custom Smart Kitchens<br />We build Custom smart kitchens</span></h2>
</div>
<div class="pp">here</div>
<div class="image"><img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/laptopRepair_large.jpg?v=1561171348" width="1179" height="480" alt="Alt text" />
<h2><span>We have our own designer</span></h2>
</div>
<div class="pp">here</div>
<div class="image"><img src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/electric_car_large.jpeg?v=1562179941" width="1179" height="480" alt="Alt text" />
<h2><span>We come and build it for you</span></h2>
</div>
<div class="pp">here</div>
<div class="TEXT">
<p>For more designs, visit us at the store.<br /> 
 Call us to schedule a free quote</p>
</div>

The easiest way would be to mark the h2 you want to align right diretly in the markup
So change the markup (html) of the second <h2> and add a class <h2 class="right"> and apply the following additional css rules
div.image {
display: inline-block;
width: auto;
}
h2.right {
right: 0px;
left: auto;
width: auto;
}

Issue getting overlay to cover an image

I cannot figure out why my overlay class is not producing the opacity overlay on top of the image. When viewing this in with the developer tools open the overlay box looks as if it is only covering the bottom 5% (just over the word "solutions"), however the link works anywhere on the image.
Does anyone see why my overlay isn't covering the entire image?
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
z-index: 3;
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>

Add display: block; or display: inline-block to your overlay class. <a> elements are inline elements which size differently than block elements. The link is still working on the entire image since the image is a child of the link
.machInfo25 {
display: inline-block;
vertical-align: top;
height: 30vh;
position: relative;
box-sizing: border-box;
}
.overlay {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
border: none;
/*z-index: 3;*/
}
.machInfo25 {
width: 25%;
}
.machInfo25 img {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
a .machineInfoTitle {
color: #FFF;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>

Here I have added a sample code, Hope, this will help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
<div class="overlay">
<div class="text">Solutions</div>
</div>
</div>
</body>
</html>

The background of .overlay was under the image. I applied the black transparency to the pseudo-code of class .overlay.
.machInfo25 {
height: 30vh;
width: 25%;
}
.overlay {
position: relative;
display: block;
}
.overlay:after {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: rgb(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.machInfo25 img {
width: 100%;
}
a .machInfoTitle {
color: white;
}
.total-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<div class="machInfo25">
<a class="overlay" href="solutions">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
<div class="total-center">
<span class="machInfoTitle">Solutions</span>
</div>
</a>
</div>

Text alignment not center in all devices

I have a footer div with this code
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
The problem is the footer-text is well centered in Laptop Screens and mobile phones. But on Mobile Phones the text comes in 2-lines.
What is the solution?

I am not sure about the code(at the time of posting the comment), but it looks like there's a lot of padding because even with adequate visible space, the text is wrapping. So..
Reduce padding around the text. OR
Apply white-space: nowrap; for your text.

Just add the following css
.footer-text {
min-width: 200px;
text-align: center;
}
And it will be fixed.
Here's a working demo:
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
.footer-text {
min-width: 200px;
text-align: center;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>

try this:
.footer {
position: absolute;
bottom: 0;
margin:0;
background-color: #DDD;
left:0;
right:0;
padding:15px 0;
text-align:center
}
.center-xy {
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>

just use
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}

How to center a text which is placed on an image

I have the following code:
HTML:
<div class="container-fluid">
<div class="row css-logo-image">
<a href="#">
<div class="meteor_head">
<h1 class="meteor_heading">Meteor</h1>
<h3>Some text!</h3>
</div>
<img src="" class="landing-image imageMeteor" />
</a>
</div>
<div class="row css-logo-image">
<a href="#">
<img src="" class="landing-image" />
</a>
</div>
</div>
CSS:
.meteor_head{
position: absolute;
z-index: 1;
margin-left: 40vw;
}
.imageMeteor{
position: relative;
z-index: 0;
}
.meteor_heading{
color: white;
font-size: 100px !important;
font-family: 'Exo 2', sans-serif;
}
.mainarea{
padding-top: 0 !important;
}
As you can see, I am trying to display the text on the image by using z-index. It works but the only problem is that I do not know how to center the text responsively. I tried a lot of things including:
margin-left:40vw;
It just refuses to work.

.meteor_head {
position: absolute;
z-index: 1;
width: 100%;
}
.imageMeteor {
position: relative;
z-index: 0;
}
.meteor_heading {
color: white;
font-size: 100px !important;
font-family: 'Exo 2', sans-serif;
text-align: center;
}
h3 {
text-align: center;
}
.mainarea {
padding-top: 0 !important;
}

If you know the height/width of the text the trick below could work:
.meteor_head{
position: absolute;
z-index: 1;
width: 200px;
height: 100px;
top:50%;
left:50;
margin-top: -50px;
margin-left: -100px;
}
Basically, you can center an absolute element using top/left 50% and then fix it by decreasing half of both height and width of the element...

try this
* {
box-sizing: border-box;
font-family: sans-serif;
}
.container {
position: relative;
overflow: hidden;
}
img {
width: 100%;
opacity: .8;
}
.centered-text {
border-radius: 6px;
padding: 0 6px;
color: white;
text-align: center;
background-color: rgba(0, 0, 0, .4);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://parrot-tutorial.com/images/nature_autumn.jpg">
<div class="centered-text">
<h4>Centered</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>