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>
Related
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>
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>
Currently, I copy this code that shows a hidden div on hover
example
but what I want is something like this
goal
What I want is when you hover on title on the 1st box, shown on the 2nd picture, the div containing the title will slide up and occupy the whole space, revealing the other contents below the title.
Can someone recommend me a tutorial similar to this? Thanks in advance :)
/* try this */
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #000000;
overflow: hidden;
width: 100%;
height: 20%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.container .text2{
display:none;
}
.container:hover .text2{
display:block;
padding-top:30px;
}
.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;
}
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World
<div class="text2"> content 1</div>
</div>
</div>
</div>
All you need to do is change the height percentage of the overlay box like so..
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 20%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.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;
}
<!DOCTYPE html>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
I have a navigation (sort of navigation) which have three buttons. My goal is that when I click a button on the navigation, the divs fade rather than there being a hard transition (which is what I've got going on currently). I want it to look like the images are crossfading when you click on different nav buttons.
#import url('https://fonts.googleapis.com/css?family=Biryani:900');
#import url('https://fonts.googleapis.com/css?family=Roboto:100');
body{
background: #fff;
}
a:visited, a:link, a:active{
color: white;
text-decoration: none;
}
#wrapper{
position: absolute;
width: 500px;
height: 680px;
background: transparent;
padding: 0px 40px 0px 40px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 0;
box-shadow: inset 0 0 12px #eee;
}
#images{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 560px;
}
#navigation{
position: absolute;
top: 20px;
left: 20;
z-index: 5;
overflow: hidden;
}
.button{
background: black;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 30px;
overflow: hidden;
float: left;
}
<div id="wrapper">
<div id="navigation">
<div class="button">01</div>
<div class="button">02</div>
<div class="button">03</div>
</div>
<div id="images">
<div style="height: 100%; overflow-y: hidden;">
<a name="one">
<div style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/crLo5L/outfit2.png" width="179">
</div>
</a>
<a name="two">
<div style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/jT7CX0/outfit1.png" width="179">
</div>
</a>
<a name="three">
<div style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/iNqMQL/outfit3.png" width="179">
</div>
</a>
</div>
</div>
</div>
I really want to achieve this using only CSS. The website that I make my profiles on only permits JS for premium users, so I'm trying to find a workaround.
With the given HTML structure in your question, i couldn't think of a way to achieve this. But with some structural changes, I managed to achieve the desired behaviour.
Check it out:
(I've dumbed down your code just to prove a point, this works perfectly without any JS running...)
#import url('https://fonts.googleapis.com/css?family=Biryani:900');
#import url('https://fonts.googleapis.com/css?family=Roboto:100');
body{
background: #fff;
}
#navigation{
position: relative;
display: flex;
}
button {
background: black;
color:white;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 30px;
}
button:focus {outline:0;}
button:focus img {opacity: 1;}
img {position:absolute;top:50px;left:50px;opacity:0;transition:opacity 800ms;}
<div id="wrapper">
<div id="navigation">
<button>01<img src="https://image.ibb.co/crLo5L/outfit2.png" width="179"></button>
<button>02<img src="https://image.ibb.co/jT7CX0/outfit1.png" width="179"></button>
<button>03<img src="https://image.ibb.co/iNqMQL/outfit3.png" width="179"></button>
</div>
</div>
You can have a vertical scroll effect by setting translateY
#import url('https://fonts.googleapis.com/css?family=Biryani:900');
#import url('https://fonts.googleapis.com/css?family=Roboto:100');
body {
background: #fff;
}
a:visited,
a:link,
a:active {
color: white;
text-decoration: none;
}
#wrapper {
position: absolute;
width: 500px;
height: 680px;
background: transparent;
padding: 0px 40px 0px 40px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 0;
box-shadow: inset 0 0 12px #eee;
}
#images {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 560px;
}
#navigation {
position: absolute;
top: 20px;
left: 20;
z-index: 5;
overflow: hidden;
}
.button {
background: black;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 30px;
overflow: hidden;
float: left;
}
.section {
-webkit-transform: translateZ( 0);
transform: translateZ( 0);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
a[id="one"]:target~#images div.section {
transform: translateY( 0px);
}
a[id="two"]:target~#images div.section {
transform: translateY( -560px);
}
a[id="three"]:target~#images div.section {
transform: translateY( -1120px);
}
<div id="wrapper">
<a id="one"></a>
<a id="two"></a>
<a id="three"></a>
<div id="navigation">
<div class="button">01</div>
<div class="button">02</div>
<div class="button">03</div>
</div>
<div id="images">
<div style="height: 100%; overflow-y: hidden;">
<a name="one">
<div id="one" class="section" style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/crLo5L/outfit2.png" width="179">
</div>
</a>
<a name="two">
<div id="two" class="section" style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/jT7CX0/outfit1.png" width="179">
</div>
</a>
<a name="three">
<div id="three" class="section" style="width:100%; height: 100%; overflow: none;" align="center">
<img src="https://image.ibb.co/iNqMQL/outfit3.png" width="179">
</div>
</a>
</div>
</div>
</div>
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%);
}