I am currently having an issue with a JavaScript Slider/Slideshow. Essentially, I have 4 images being displayed in the slider. However, I wish to have an image for the border of this slider, so it 'overlays' the images to make it appear like the slider images are inside of this border image.
My HTML code:
<body>
<div id="container">
<div id="frame"></div>
<div id="slides">
<div class="slides_container">
<img src="img/slider/1.jpg" width="954" height="247" alt="Slide 1">
<img src="img/slider/2.jpg" width="954" height="247" alt="Slide 2">
<img src="img/slider/3.jpg" width="954" height="247" alt="Slide 3">
<img src="img/slider/4.jpg" width="954" height="247" alt="Slide 4">
</div>
</div>
</div>
</body>
My CSS code:
/*
Page style
*/
body {
}
#container {
width: 964px;
height: 257px;
z-index: 99999;
padding: 10px;
margin: 0 auto;
position: relative;
}
#frame {
background: url(../img/slider_frame.png) no-repeat;
width: 964px;
height: 257px;
position: absolute;
top: -3px;
left: -80px;
z-index: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
pointer-events: none;
-moz-box-shadow:;
-webkit-box-shadow:;
box-shadow: 0 0 5px #000, 0 0 6px #000;
}
/*
Slideshow
*/
#slides {
position: absolute;
top: 1px;
left: -74px;
z-index: 100;
width: 954px;
height: 247px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width: 954px;
position: relative;
display: none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width: 570px;
height: 270px;
display: block;
}
.slides_container a img {
display: block;
}
/*
Next/prev buttons
*/
#slides .next, #slides .prev {
position: absolute;
top: 129px;
left: -80px;
width: 48px;
height: 48px;
display: block;
z-index: 101;
}
#slides .next {
background-image: url(../img/arrow-right.png);
}
#slides .next:hover {
background-image: url(../img/arrow-right-hov.png);
}
#slides .prev {
background-image: url(../img/arrow-left.png);
}
#slides .prev:hover {
background-image: url(../img/arrow-left-hov.png);
}
#slides .next {
left: 826px;
}
So essentially, my question is how do I make the images in the slider display inside of the slide's border?
#container {
height: 257px;
width: 964px;
z-index: 99999;
}
#frame {
background: url(../img/slider_frame.png) no-repeat scroll 0 0 transparent;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 5px #000000, 0 0 6px #000000;
height: 257px;
left: 0;
pointer-events: none;
position: absolute;
top: -5px;
width: 964px;
z-index: 99999;
}
#slider ul, #slider li {
list-style: none outside none;
margin: 0;
padding: 0;
}
#slider li, #slider2 li {
border-radius: 3px 3px 3px 3px;
height: 247px;
overflow: hidden;
width: 954px;
}
I see above code is use in the demo site
Related
i have a box and i need to put smooth triangle bottom of the div but i couldn't achieve as i want how can i do this like below image ?
.slide-box {
position: relative;
display: inline-block;
background: #e41113;
border: 1px solid #df2b2c;
border-radius: 6px;
}
.slide-box a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px 10px;
}
.slide-box:after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #df2b2c;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
</div>
I'm not sure that you'll be able to complete what you want with ::after.
But probably you can use transition rotate and scale on absolute positioned element in the bottom.
Here's the concept:
.slide-box {
position: relative;
display: inline-block;
background: #e41113;
border: 1px solid #df2b2c;
border-radius: 6px;
width: 145px;
height: 70px;
}
.slide-box a {
display: block;
color: #fff;
background: #e41113;
display: block;
text-decoration: none;
padding: 12px 10px;
z-index:1000;
}
.slide-box .corner {
position: absolute;
top: 70px;
left: 0px;
width: 103px;
height: 103px;
background-color: #e41113;
transform-origin: top left;
transform: scale(1, 0.25) rotate(-45deg);
border-radius: 6px;
}
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
<div class="corner"></div>
</div>
Of course the main task will be positioning.
So there you need 2 prerequisitions:
With "transform-origin: top left;" you need to keep top of the .corner == height of your main container (don't know why, but bottom:0 not works, maybe youll resolve
this)
The .corner should be square (width=height), and to keep it smooth you need to maintain ratio width(.corner) = width(.slide-box)*sqrt(2). Means width of your corner`s diagonal should be equal to width of main container.
Here is a way to do:
.container {
width: 300px;
}
.slide-box {
height: 200px;
width: 100%;
position: relative;
background-color: #df2b2c;
text-align: left;
margin-left: 70px;
margin-bottom: -75px;
border-radius: 0 0 25% 25%;
}
.slide-box a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px 10px;
}
.corner {
position: relative;
background-color: #df2b2c;
text-align: left;
margin-left: 95px;
}
.corner:before,
.corner:after {
content: '';
position: absolute;
background-color: inherit;
}
.corner,
.corner:before,
.corner:after {
width: 165px;
height: 165px;
border-top-right-radius: 30%;
}
.corner {
transform: rotate(-120deg) skewX(-30deg) scale(1,.866);
}
.corner:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.corner:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
<div class="container">
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
</div>
<div class="corner"></div>
</div>
I have a container which holds an image and a panel the appears when you hover over that image. I am trying to get the box shadow on the panel to appear behind the image, while the rest of the panel overlaps the image.
What I have vs. What I'd like to have
HTML:
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>
CSS:
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 0;
overflow: hidden;
z-index: 5;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
box-shadow: 5px 5px 0px #888888;
}
.container .icon:hover + .sum-container {
z-index: 6;
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
I've included a JSFiddle as well.
Also, still new here. If anyone can suggest a better title, please let me know. I realize you can't actually set multiple z-indexes for one element, but I'm looking for a solution with a similar effect.
If I understand the end goal, you can make the shadow a pseudo element with a negative z-index and remove the z-index from .sum-container and .sum-container will be over .icon and it's pseudo element will be under both of them.
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 1;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.sum-container:after {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
content: '';
background: #888;
transform: translate(0,10px);
z-index: -1;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
}
.container .icon:hover + .sum-container {
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>
I've looked at some other threads, but nothing seems to work. I'm trying to center a lightbox of an unknown width in the center of the page (horizontally). Any help would be appreciated. The code is as follows.
HTML
<div class="backdrop"></div>
<div class="box">
<div class="close">x</div>
<img src="../pics/placeholder.png">
</div>
CSS
.backdrop {
position: absolute;
text-align: center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter:alpha(opacity=0);
z-index: 50;
display: none;
}
.box {
position: absolute;
top: 20%;
width: auto;
height: auto;
background: #ffffff;
z-index: 51;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
display: none;
}
.close {
position: absolute;
padding-left: 5px;
padding-top: 5px;
margin-left: 98%
margin-top: 4px;
cursor: pointer;
font-family: sans-serif;
}
• To center an element horizontally with position: relative use:
.element {
position: relative;
display: inline-block;
margin: 0 auto; /* We don't care about 0, but we do care about auto. */
}
• To center an element horizontally with position: absolute or position: fixed use:
.element {
position: fixed; /* Lightboxes usually use position: fixed. */
left: 50%;
transform: translateX(-50%);
}
Hi i have a circular div and i want some text to show up on hover and disappear on mouse out using only css
for example if have a circular div , i want the tag say home to appear on its right side on hover and disappear on mouse out
my code for the buttons is-
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 9999;
color: transparent;
width: 26px;
height: 26px;
outline: none;
margin: 25px 0;
border-radius: 50%;
border: 4px solid #fff;
}
.no-touch .cbp-fbscroller > nav a:hover {
background: rgba(255,255,255,0.4);
}
.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #fff;
}
you can use this code.....
.circle {
width: 150px;
height: 150px;
border: 5px solid whitesmoke;
border-radius: 50%;
position: relative;
background:url('http://download.jqueryui.com/themeroller/images/ui- bg_flat_100_555_40x100.png');
}
.circle:before {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: whitesmoke;
border-radius: 50%;
content:"";
display: block;
}
.circle:hover span {
display:inline;
width: 0;
height: 0;
position: absolute;
top: 50%;
left:100%;
margin: -5px 0px -5px -25%;
padding: 5px 0px 5px 25%;
}
span
{
display:none;
}
For Demo:JSFIDDLE
How can I add a nice overlay like the one in the following image?
Consider the following HTML, how would I add an overlay like that? I know I can use a gradient on top of it, and apply it diagonally, but can I curve it as well?
<div class="photostrip">
<div class="overlay" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
<img src="http://i.imgur.com/a21tM.jpg" />
</div>
Here's something I've tried (I've oversaturated the overlay so it's easily seen), but it's not quite the shape I'm looking for.
body { background-color: #4b74db; }
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #000;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
position: relative;
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
border-bottom-right-radius: 200px 403px;
/* This adds the nice overlay. */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.05) 100%);
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}
Does something like this work for you: http://codepen.io/defo550/pen/Fcsxo
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #fff;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
/* Remove default list stylings*/
list-style: none;
/* provide a position context for our pseudo element */
li {
position: relative;
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}
/* overlay styles
create pseudo element
*/
.photostrip li:after {
content: "";
position: absolute;
/* position above img */
z-index: 5;
width: 175px;
height: 120px;
top: 0;
left: 5px;
/* overlay styles */
background: linear-gradient(135deg, rgba(255,255,255,0.33) 0%,rgba(255,255,255,0.33) 60%,rgba(255,255,255,0) 61%,rgba(255,255,255,0) 100%);
}
<ul class="photostrip">
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
I put your images in an unordered list and then created a pseudo-element on the li (that wraps each image) that has a background gradient with the desired effect ( or close ) of your image above.
You could also target each li separately in the CSS to change up the background gradient.
i think this close to what you are looking for you just have to play with the numbers
http://codepen.io/anon/pen/GDvju
i just added another layer and gave it a top left radius
body { background-color: #4b74db; }
.photostrip {
margin: 0 auto;
width: 185px;
background-color: #000;
box-shadow: 0px 3px 7px 3px #333;
padding: 7px;
padding-bottom: 2px;
position: relative;
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
/* This adds the nice overlay. */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.60) 0%,rgba(255,255,255,0.05) 100%);
}
.overlay2 {
height: 100%;
width: 50%;
position: absolute;
right: 0px;
border-top-left-radius: 300px 600px;
background: -webkit-linear-gradient(top, rgba(0,0,0,0.60) 0%,rgba(0,0,0,0.05) 100%);
}
img {
display: block;
width: 175px;
height: 120px;
margin: 0 auto;
margin-top: 6px;
margin-bottom: 11px;
}
}