How to create a image frame by css? - javascript

I want to try a design by CSS3 like a picture frame (like as following picture).
I have tried following :
.frame_box li {
border: 1px solid #000;
height: 200px;
width: 150px;
display: inline-block;
border-radius:4px;
}
<ul class="frame_box">
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
</ul>
But I can not do that. Please Help me. Thanks advance.

If your images are the same size, you could use pseudo elements with borders. this will mean that you need to make the border width + height to be the height of your image.
DEMO:
.image {
position: relative;
height: 300px;
width: 200px;
background: url(http://lorempixel.com/200/300);
}
.image:before,
.image:after {
content: "";
position: absolute;
top: 0;
height: 200px;
border: 50px solid gray;
}
.image:before {
right: 0;
border-left-color: transparent;
border-right: none;
}
.image:after {
left: 0;
border-right-color: transparent;
border-left: none;
}
<div class="image"></div>
You can also use gradients to create this kind of shape (suggested by Harry's answer here ):
.shape {
height: 400px;
position: relative;
width: 50vw;
background: linear-gradient(225deg, #F3D56A 30px, transparent 30px), linear-gradient(45deg, #F3D56A 30px, transparent 30px), linear-gradient(135deg, #F3D56A 30px, transparent 30px), linear-gradient(315deg, #F3D56A 30px, transparent 30px);
}
.shape img {
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<div class="shape">
<img src="http://lorempixel.com/300/300" />
</div>

Related

making a photo slide 1px per 20 milliseconds

I need help making the transition duration, specifically, when the photo slide to the left, it slides 1px per 20 milliseconds.
The transition should happen when clicking on the photo itself, not the bars below.
While the sliding is in process, clicking the image will not have any effect.
When the second image takes the place of the first one, the first image will take place(circular fashion).
body{
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow{
width: 700px;
height: 400px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.02s;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hw3</title>
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<div class="slide s1">
<img src="1.jpg" alt="image">
</div>
<div class="slide">
<img src="2.jpg" alt="image">
</div>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
</div>
</div>
</body>
</html>

How do I add a previous and next function to on a vertical carousel?

How do I add a previous and next function on a vertical carousel that is also compatible with Squarespace? I am trying to model a carousel around the following code I found from codepen
When I add more images to the carousel, I am unable to scroll down. Can someone help in showing me how I can add this functionality please? Thank you in advance!
Below is the code:
HTML
<div class="wrapper">
<ul class="list-reset">
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
</ul>
<div class="featured-image"></div>
</div>
CSS
body {
background: #f3f3f3;
color: #111;
padding: 20px;
display: flex;
place-items: center;
height: 100%;
justify-content: center;
align-items: center;
height: 90vh;
}
.wrapper {
width: 80%;
position: relative;
max-width: 100%;
overflow: hidden;
// border-radius: 3px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .1)
}
.list-reset {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
width: calc(30% - 4px);
min-height: 350px;
height: 70vh;
flex-direction: column;
border: 2px solid #fff;
li {
padding: 20px;
border-bottom: 2px solid #fff;
transition: all 600ms ease;
cursor: pointer;
&:hover {
background: #f9f9f9;
}
img {
transition: all 600ms ease;
opacity: 0;
transform: translatey(10px);
transform-origin: bottom;
}
a {
display: block;
margin-top: 4px;
}
span {
font-size: 0.7rem;
opacity: 0.7;
}
img {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.active {
z-index: 999;
background: #fff;
a {
color: #548AF7;
}
img {
opacity: 1;
transform: translatey(0);
}
}
}
Javascript
$('.list-reset li').on('click', function() {
$('.list-reset li').removeClass('active')
$(this).addClass('active')
})
You could just add:
.list-reset{
overflow: auto;
}
So you can scroll down the list.
I'm aware it has been months so you probably worked this out, but I'll leave this here just in case.
https://www.quackit.com/html/codes/html_scroll_box.cfm

Scroll down button animation not working

I'm trying to make a photography portfolio website, and need to make a scroll down button. I made the scroll button using html and css and tried to use jquery to create an animation where it slowly goes down the page when you click the scroll down button. However, as of right now it just immediately goes down to the second section. However, when I tried to it on codepen, the animation worked.
https://codepen.io/alihaider2018/pen/PQQXLZ (imgs not showing, and changed background to blue so you can see the button better)
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
#section01 a span {
position: absolute;
top: 800px;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
}
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Nature.js"></script>
<link rel="stylesheet" type="text/css" href="webpage.css">
</head>
<section id="section01" class="demo">
<body background="lol.jpg" >
<div id="nav">
<ul>
<li> Contact </li>
<li> About Me </li>
<li> Business </li>
<li> Street </li>
<li> Nature </li>
</ul>
<p id="logo"> Icyportraitsgta </p>
</div>
<div id="description">
<a href="#section02"><span>
</span></a>
<p class="para"> GTA Portrait photography <br> with your favourite themes </p>
</div>
</section>
<img src="sanafull15.jpeg" class="sana15" alt="sanafull15"> </img>
<img src="sanafulle.jpeg" class="sanafulle" alt="sanafulle"> </img>
<img src="qasside.jpeg" class="qasside" alt="qasside"> </img>
<section id="section02">
<img src="icysit.jpg" class="icysit" alt="icysit"> </img>
<img src="ravedited1.jpg" class="rav1" alt="rav1"> </img>
<img src="qassmoke1.jpeg" class="qas2" alt="qas2"> </img>
</body>
</section>
</html>
Your HTML is a complete invalid mess. I tried to fix it somehow and the following animation work:
(click on the "section02" link to animate)
$(function() {
console.log('ready');
$('a[href^=#]').on('click', function(e) {
console.log('click');
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});
#section01 a span {
position: absolute;
top: 800px;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
border-radius: 100%;
opacity: 0;
}
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js">
</script>
</head>
<body background="lol.jpg">
<section id="section01" class="demo">
<div id="nav">
<ul>
<li> Contact </li>
<li> About Me </li>
<li> Business </li>
<li> Street </li>
<li> Nature </li>
</ul>
<p id="logo"> Icyportraitsgta </p>
</div>
<div id="description">
<a href="#section02">section02<span>
</span></a>
<p class="para"> GTA Portrait photography <br> with your favourite themes </p>
</div>
<img src="sanafull15.jpeg" class="sana15" alt="sanafull15">
<img src="sanafulle.jpeg" class="sanafulle" alt="sanafulle">
<img src="qasside.jpeg" class="qasside" alt="qasside">
</section>
<section id="section02">
<img src="icysit.jpg" class="icysit" alt="icysit">
<img src="ravedited1.jpg" class="rav1" alt="rav1">
<img src="qassmoke1.jpeg" class="qas2" alt="qas2">
</section>
</body>
</html>

jQuery slider doesn't work in Safari desktop

i have created a jquery carousel, which has only a next/prev functionality, everything is working fine in Chrome whereas there are problems in safari. Thus the images that should be hidden in the slider are appearing at the bottom (visually hidden, i have checked with firebug).
This happens only in Safari.
<div class="slider">
<a class="prev-arrow arrow"></a>
<div class="image-container">
<img alt="" src="http://bit.ly/1Icor0I" class="active">
<img alt="" src="http://bit.ly/1Ubvzly">
<img alt="" src="http://bit.ly/1KDjkg6">
<img alt="" src="http://smu.gs/1IwVgJp">
<img alt="" src="http://bit.ly/1JV31pa">
<img alt="" src="http://bit.ly/1eFfcNZ">
<img alt="" src="http://bit.ly/1DdSEjq">
<img alt="" src="http://bit.ly/1SQshBK">
<img alt="" src="http://bit.ly/1LUnGxU">
<img alt="" src="http://bit.ly/1fO17ic">
<img alt="" src="http://bit.ly/1ha0UHb">
<img alt="" src="http://bit.ly/1IOce80">
<img alt="" src="http://bit.ly/1gsBwwf">
<img alt="" src="http://bit.ly/1LUnHBZ">
</div>
<a class="next-arrow arrow"></a>
</div>
$(document).on("click", ".prev-arrow", function () {
var imageContainer = $(this).next();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() - 300}, 200);
});
$(document).on("click", ".next-arrow", function () {
var imageContainer = $(this).prev();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() + 300}, 200);
});
and css
.slider .image-container {
overflow: hidden;
width:500px;
display: inline-flex;
margin-left: 25px;
height: 120px;
}
.slider .image-container img {
display: inline-block;
width:200px;
margin-left: 2px;
}
.slider .image-container img.active {
border: 6px solid #007aff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider {
display: inline-block;
position: relative;
width: 800px;
}
.prev-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
cursor: pointer;
background-image: url("/images/agency/left-arrow.jpg");
background-color:red;
}
.next-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
margin-left: 15px;
cursor: pointer;
background-image: url("/images/agency/right-arrow.jpg");
background-color:red;
}
https://jsfiddle.net/zzLf1pL3/
I don't want to make many changes my HTML code. Because it will make me to re-write a lot of other stuff.
Thanks for help!

Slider First image Fix Width

At my home page in slider code i want to fix width for first image. Is it possible from css or html. Because i tried but not work. My current slider css code are bellow.
#slider {
background-attachment: scroll;
background-color: #FFFFFF;
background-image: url("http://silverharmony.in/wp-content/uploads/2012/10/Slider_bg.png");
background-position: 50% 0;
background-repeat: repeat;
display: block;
float: left;
width: 100%;
}
.inner, .wrapper {
display: block;
height: 100%;
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
ul.kwicks {
background-color: #333333;
border-radius: 3px 3px 3px 3px;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
ul.kwicks li {
background: url("../images/icons/ajax_loader.gif") no-repeat scroll 50% 50% transparent;
display: block;
overflow: hidden;
padding: 0;
}
.kw_img {
display: block;
}
.kw_img img {
vertical-align: middle;
}
.kw_shadow {
background: url("../images/icons/overlay.png") repeat-y scroll 0 0 transparent;
border-right: 1px solid rgba(255, 255, 255, 0.3);
height: 100%;
position: absolute;
right: 0;
width: 40px;
z-index: 2;
}
.last .kw_shadow {
background: none repeat scroll 0 0 transparent !important;
border-right: 0 none;
}
My current Slider HTML Code Bellow.
<div id="slider">
<div class="inner">
<ul style="width:960px; height:400px; margin:15px 0;" data-width="960" data-max="660" class="kwicks" id="kwicks-1">
<li class="kwick" style="left: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 192px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 384px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/3.png&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 576px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-1.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick last" style="right: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img"><img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/1.jpg&h=400&w=960&zc=1&q=100"></div>
</li>
</ul>
</div>
​
Currently my slider looking like this. http://silverharmony.in/
And i actual want to like below link.
http://silverharmony.in/wp-content/uploads/2012/10/slider-screenshoot.png
Slider is using Kwicks jQuery plugin. I added first li item .kwicks-selected class to achive what you are looking for.
Example here jsFiddle

Categories

Resources