I need to put some text on the pic and it has to stay there forever in that exactly color. I did it, but when I hover on a pic - text disappears. What should I do?
Didn't find answer.
I want text being there all the time with and without hovering. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay{
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
}
</style>
</head>
<body>
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
</body>
</html>
Add the z-index property to your text.
Information here
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
Related
In chrome browser, when a border is added to the parent fixed element, its absolute child element location changes, specifically by the outer border of the parent element, but not in edge and Firefox browsers.
document.getElementById('add').addEventListener("click",()=>{
document.getElementById('fixed').classList.add("border");
})
document.getElementById('delete').addEventListener("click",()=>{
document.getElementById('fixed').classList.remove("border");
})
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 100px;
height: 30px;
top: 30px;
right: 30px;
background: yellow;
}
.border{
border:8px solid green;
}
<html>
<head>
<title>TSET</title>
</head>
<body>
<div class="fixed" id="fixed">
<div class="absolute" ></div>
<button id="add">add</button>
<button id="delete">delete</button>
</div>
</body>
</html>
This is definitely a Chrome bug, they do not trigger the recalculation of the position
You could work around this by making sure the position is recalculated
you can also use
right:0.000001px;
if you do dot what to write the width in two separate rules. But I think this is uglier than the solution below
document.getElementById('add').addEventListener("click",()=>{
document.getElementById('fixed').classList.add("border");
})
document.getElementById('delete').addEventListener("click",()=>{
document.getElementById('fixed').classList.remove("border");
})
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 100px;
height: 30px;
top: 30px;
right: 30px;
background: yellow;
}
.border{
border:8px solid green;
}
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 30px;
height: 30px;
top: 0px;
right: 0px;
background: yellow;
}
.border{
border:8px solid green;
}
.border .absolute{
left:calc(100% - 30px);
}
<html>
<head>
<title>TSET</title>
</head>
<body>
<div class="fixed" id="fixed">
<div class="absolute" ></div>
<button id="add">add</button>
<button id="delete">delete</button>
</div>
</body>
</html>
I'm trying to have an image in the body of the page that's full width. Not a background. On the Center of this image id like a bar that blurs and darkens the background image. Then id like words on the bar.
Here is what i got:
#superimagecontainer {
position: relative;
height: auto;
}
#container4 {
position: absolute;
left: 0px;
width: 100%;
height: auto;
overflow: hidden;
z-index: 0;
}
#container4 img {
width: 100%;
position: relative;
z-index: 0;
}
#container4b {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 1;
}
#container4b img {
width: 100%;
position: relative;
filter: blur(3px) brightness(50%);
}
h8 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
opacity: 0.75;
}
<div id="superimagecontainer">
<div id="container4">
<img src="img/buildings750.jpg" alt="" />
</div>
<div id="container4b">
<img src="img/buildings750.jpg" alt="" />
<h8>THIS IS THE BEST TEXT SAMPLE EVER</h8>
</div>
</div>
When I apply the blur filter to my markup the edges are not being blurred. I would like the entire region to be blurred.
HTML
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
CSS
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: 0;
right: 0;
bottom: 0px;
content: "text";
position: absolute;
height: 20%;
width: 100%;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(12px);
filter: blur(12px);
}
Codepen:
http://codepen.io/aaronbalthaser/pen/qNOYdE
The Codepen shows the blurred region. It is kind of like a footer but as you can see the edges are not blurred. Any ideas?
Thanks
You can set overflow: hidden and stretch a little bit the blurred image. I have set width to 110%, height to 35%, left, right and bottom to -5% (the added percentage to width and height). Hope this is what you want.
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: -5%;
right: -5%;
bottom: -5%;
content: "";
position: absolute;
height: 35%;
width: 110%;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(8px);
filter: blur(8px);
overflow: hidden;
}
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
How do I get the green div to overlap my DOCX or PDF IFrame in IE? Using z-indexes doesn't work.
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
}
#container {
position: absolute;
top: 25px;
left: 50px;
right: 50px;
bottom: 25px;
overflow: hidden;
z-index: 1;
}
#overlap {
background-color: green;
position: absolute;
height: 100%;
width: 250px;
overflow: hidden;
right: 0;
z-index: 10;
}
</style>
</head>
<body>
<div id="container">
<iframe height="100%" width="100%" src="Test.docx"></iframe>
</div>
<div id="overlap">
</div>
</body>
</html>
I'm trying to replicate this mockup:
I know how to create a semi-circle in CSS but I don't want an entire semi-circle. I want just the top, center portion of a much larger circle.
I'm specifically looking for the CSS code to create the black circle in the above mockup. Thanks!
Here is my attempt:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>
<img id="logo" src="/images/logo.png">
</h1>
<div id="half_circle">
<div id="footer_container">
<div id="learn">
Learn more.
</div>
<div id="signin">
<div>
Sign in to start callin'it
</div>
</div>
</div>
</div>
</body>
</html>
#half_circle {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
background-color: #111111;
display: block;
position: absolute;
bottom: 0;
}
#footer_container {
display: block;
position: relative;
height: 100%;
width: 100%;
}
#learn {
text-align: center;
padding-top: 3em;
}
#footer_container a {
color:white;
}
#signin {
display: block;
width: 100%;
position: absolute;
bottom: 10%;
margin-right: auto;
margin-left: auto;
}
#signin div {
text-align: center;
}
Just make a big circle and hide it :)
Demo: http://jsfiddle.net/Ye35w/1/
body {
overflow: hidden;
}
.circle {
position: absolute;
top: 65%;
left: -25%;
display: block;
width: 150%;
height: 150%;
background-color: #ccc;
border-radius: 50%;
}