I make use of many covered background-images.
If i use the same image within the page content area and inside the fixed left panel it flickers very heavy.
Reproduced:
http://jsfiddle.net/7aUnL/8/
HTML:
<div class="wrapper">
<div class="inner">
<div class="header cover">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="image cover"></div>
</div>
</div>
</div>
<div class="flickermaker">
<div style="background-image:url(http://abload.de/img/1444863452uaupx.jpg)" class="icon cover"></div>
</div>
CSS:
div.wrapper {
float: left;
width: 100%;
}
div.inner{
margin-bottom: 120px;
margin-left: 252px;
margin-right: 12px;
position: relative;
}
div.header {
display: inline-block;
margin-bottom: 10px;
min-height: 140px;
overflow: hidden;
padding-bottom: 8px;
position: relative;
width: 100%;
}
div.image {
bottom: 0;
box-shadow: -3px 0 5px 3px rgb(0, 0, 0);
float: left;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 140px;
z-index: 2;
}
.cover {
background-color: rgb(248, 248, 248);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
div.flickermaker{
border-right: 1px solid rgb(205, 205, 205);
bottom: 0;
height: auto;
left: 0;
margin-left: 0;
top: 0;
z-index: 999;
font-size: 0.85em;
overflow: hidden;
width: 240px;
position: fixed !important;
}
.icon {
border-left: 3px solid rgba(114, 184, 251, 0.4);
height: 100%;
left: -3px;
position: absolute;
transition: border-color 0.3s ease 0s;
width: 50px;
height:50px;
}
Without the small icon the problem disappears. Any suggestions?
Edit: with a smaller version of the same image everything is fine:
http://jsfiddle.net/nxU3s/1/
The "flickering" image is a 1.6MB 1920x1080 file, most likely some browsers are not yet ready to deal with this range of dimensions (Firefox flickers, Chrome does not). Background-size is a pretty new property so don't expect perfect support in such extreme cases.
Anyway I can't see a serious real life application of your example. Use thumbnails instead of high definition images. You also need to clean your markup which is quite a nonsense.
In the end consider the <img> tag who will be most of the time easier to use .
Related
Am working on a design of a card whereby I need to make the red/maroon part bend inwards (from the black part) using css. Please assist?
HTML Markup
<div class="container phonecard2">
</div>
<div class="btm-right">
</div>
CSS code
.container.phonecard2 {
position: relative;
background: #000;
margin-top: 140px;
width: 35%;
height: 260px;
padding: 20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius: 15px;
}
.btm-right{
position: absolute;
width: 0;
height: 0;
bottom: 0;
right:0;
border-style: solid;
border-width: 0 0 160px 450px;
border-color: transparent transparent #ba0c2f transparent;
}
PNG image of my design after the above code
<div class="container phonecard2">
<div class="btm-right"></div>
</div>
<style>
.container.phonecard2 {
position: relative;
background: linear-gradient(to left, #ba0c2f 70%, #000000 30%);
margin-top: 140px;
width: 600px;
height: 260px;
padding: 20px;
border-radius: 15px;
overflow: hidden
}
.btm-right {
position: absolute;
background: #000;
width: 800px;
height: 680px;
left: -130px;
top: -330px;
border-radius: 0 0 580px 0;
transform: rotate(21deg);
}
</style>
There have been several questions regarding some kind of transparent border but not what I am looking for, I think.
It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border?
So you have a continuous background and each item on top of it "cuts out" some part of it.
A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.
If not, what would be the way to achieve a responsive design like that?
Sorry, I don't know any other way to explain it. Thank you.
See example/fiddle here: jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>
<div id="main_footer">
<div id="icons"></div>
</div>
My thought process
The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.
Example:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}
<div class="bg">
<div class="border">black border</div>
<div class="no-border">"transparent" border</div>
</div>
Solution:
The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
<div class="container">
<div class="icon">
<img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
</div>
<div class="bg">
<img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
</div>
</div>
you could create a image with transparent background and use that as a border-image.
.background {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background-color: #fd1dfa;
z-index: 1 !important;
}
.background:after {
content: "";
display: table;
clear: both;
}
hr {
border: 10px solid white;
position: relative;
top: 100px;
z-index: 5 !important;
}
.center {
position: relative;
width: 50px;
height: 50px;
background-color: #fd1dfa;
color: #ffffff;
padding: 10px;
z-index: 10 !important;
}
.border {
position: relative;
z-index: 8 !important;
margin: 30px;
width: 70px;
height: 70px;
float: left;
background: white;
border: 10px solid transparent;
border-image:
}
<div class="background">
<hr>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
</div>
I am working on an Background Ad-System and my z-index isn't working.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
See Fiddle.
(Make the right col bigger to see the image and divs better)
Ok.. the wrong div is up... The Code stand at jsfiddle and show at z-index.
#page
{
width: 1100px;
margin: 100px 0px 0px -550px;
min-height: 906px;
background-color: #fff;
left: 50%;
cursor: auto;
position: absolute;
z-index: 1;
}
#adGfwADS
{
width: 100%;
min-height: 1050px;
background-repeat:no-repeat;
cursor: pointer;
position: absolute;
z-index: 10;
background-color: #000; background-image: url(http://crazysportz.de/1.jpg); background-position: 50% 0px;
}
<div id="dimensions">
<div id="adGfwADS" class="adGfwADS" url="http://google.de">
<div id="page">blupp</div>
</div>
</div>
The div id="page" will show but this is wrong then z-index is lower as from adGfwAds and i use position to use z-index but z-index work not =(
I have a test site here:
http://www.hugoproject.com/test.html
I'm trying to put a second row of the book icons beneath the first, but whatever I try doesn't work. To clarify the situation, the following code makes a single book icon appear:
<div class="project">
Arrow<span></span>
</div>
When I have two sets of the code, two icons appear, when there are three sets of the code three icons appear. But if I have four or more sets of the code only three icons appear! I want for the extra sets of code to make icons beneath the first three.
Also at the moment when you resize the browser window this makes the top row of icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.
Any ideas?
HTML
<div id="content">
<div id="home-projects-wrapper">
<h1 class="home">Hello! My name is Brandon</h1>
<div id="home-projects">
<div id="projects" class="circle">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
position: absolute;
width: 100%;
height: 100%;
left: 0;
overflow-x: hidden;
}
#container.open {
left: 270px;
position: absolute;
width: 100%;
height: 100%;
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
overflow-x: hidden;
}
#content {
width: 80%;
max-width: 1170px;
margin: 7% auto;
position: relative;
font-size: 14px;
line-height: 22px;
color: #777777;
}
.page-template-page-templateshome-php #content {
width: auto;
margin: 0 auto;
position: static;
}
.single-post #content {
width: 60%;
}
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects {
width: 100%;
}
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height:100%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link, .circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover {
opacity: .9;
}
If you want to continue with what you have now, just remove position:absolute from .project-group
You need to define a height for your blocks, i.e.
.project {
float: left;
text-align: center;
width: 33.3%;
height: 290px;
}
.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 100%;
height: 290px;
background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
background-position: 0px 0px;
background-size: 800%;
}
That will not completely solve your issue though. Maybe you want to use images inside the boxes instead of a background image/icon. You can also always calculate new dimensions with JavaScript/jQuery.
I would set up a div container for the books with a set width equal to the width of the books + margins.
Then set the book divs to "float: left;" and it should put 3 books per line.
If you want to keep the auto scaling you should do all this with percentages like you are currently doing.
I have a small camera store/website (jdsrde.com)
Currently updating and wanted to add a zoom effect so when you scroll(hover) over images the get zoomed view without clicking to product page.
Like a thumbnail, I have like 50 images.
The code works but for some reason the "zoom" image always goes behind the other images in the page. I wanted to see what I can do to fix this so that the "zoom" image goes to the front of the page layers.
I have changed the z-index so many times but to no avail
I feel so stupid as i have been trying to figure this out for hours now to no avail and I know the answer is so easy.
I dont want to use java i prefer css.
here is the codes im using. Any help would be gladly appreciated!!!
CSS>>>>
#zoom { position: relative; top: 10px; left: 10px; width: 75px; background-color: rgb(255, 255, 255); }
#zoom a.p1, #zoom a.p1:visited { border: 0pt none ; background: rgb(255, 255, 255) none repeat scroll 0%; display: block; width: 75px; height: 75px; text-decoration: none; top: 0pt; left: 0pt; }
#zoom a img { border: 0pt none ; }
#zoom a.p1:hover { text-decoration: none; background-color: rgb(140, 151, 163); color: rgb(0, 0, 0); }
#zoom a .large { border: 0px none ; display: block; position: fixed; width: 1px; height: 1px; top: -1px; left: -1px; }
#zoom a.p1:hover .large { border: 1px solid black; display: block; position: fixed; top: 0px; left: 250px; width: 300px; height: 200px; }
xhtml(of one of the images "zoom")>>>>>>
<div id="zoom" style="height: 106px; width: 150px; height: 106px; left: 1400px; position: absolute; top: 325px; width: 150px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 150px; ">
<a class="p1" href="Camera_Sears_35_RF.html" title="Camera_Sears_35_RF.html">
<img src="All2020_files/shapez" alt="" style="height: 106px; left: 0px; position: absolute; top: 0px; width: 150px; " />
<img class="large" src="All2020_files/z" title="Enlarged view of image" alt="Enlarged view of image" />
</a>
</div>
</div>
Thanks again!!
z-index only affects other positioned elements in the same 'stacking context'. Since the div inside #zoom is also positioned relative the z-index on the anchor has no effect.
Try applying the z-index the the div, not the anchor. So adding the following should help:
#zoom>div:hover {
z-index: 9;
}