Hi I'm looking for some resources to create the implied, sliding functionality seen in the mock up below (never mind the half faded elements)
*Note: this isn't exactly what my code looks like yet, it's just the mock up.
I have been able to move the elements to the right only once with this function:
function slideRight(){
var elem = document.getElementById('weekScroller');
elem.style.left = (elem.style.left+290)+ 'px';
}
but this only changes the position once and I need the elements to continue to scroll each time I click the arrows. Also I'd like to make the scroll a smooth motion rather than a jump.
HTML:
<div id="weekScroller">
<div class="weekScrollerDay">
BOX 1
</div>
<div class="weekScrollerDay" id="testID">
BOX 2
</div>
<div class="weekScrollerDay">
BOX 3
</div>
<div class="weekScrollerDay">
BOX 4
</div>
<div class="weekScrollerDay">
BOX 5
</div>
</div>
<div id="scrollLeft" onclick="slideLeft()">
Left
</div>
<div id="scrollRight" onclick="slideRight()">
Right
</div>
CSS:
#scrollLeft{
position: fixed;
left: 35px;
top: 50%;
margin-top: -100px;
background-color: #000;
height: 40px;
width: 40px;
color: #fff;
}
#scrollRight{
position: fixed;
right: 35px;
top: 50%;
margin-top: -100px;
background-color: #000;
height: 40px;
width: 40px;
color: #fff;
}
#weekScroller{
opacity: 1;
position: fixed;
top: 50%;
margin-top: -200px;
height: 400px;
display: block;
overflow:hidden;
}
.weekScrollerDay{
opacity: 1;
width: 280px;
height: 390px;
margin: 5px;
background-color: rgb(200, 200, 200);
float: left;
display:inline-block;
}
Theres a Jquery carousel called Owl Carousel that i think would meet your needs. See demo in the snippet.
$(document).ready(function () {
var carousel = $("#owl-demo");
carousel.owlCarousel({
navigation:true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
});
});
.owl-theme .owl-controls{
margin-top: 10px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page{
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/* preloading images */
.owl-item.loading{
min-height: 150px;
background: url(AjaxLoader.gif) no-repeat center center
}
#owl-demo .owl-item > div img {
display: block;
width: 100%;
height: 150px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom:4px;
}
#owl-demo .owl-item > div{
background : #42bdc2;
text-align: center;
padding:10x 0px;
margin:3px;
color: white;
font-size:32px;
border:1px white;
}
.wrapper-with-margin{
margin:0px 50px;
}
.owl-theme .owl-controls .owl-buttons div {
position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
left: -45px;
top: 55px;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
right: -45px;
top: 55px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div class="wrapper-with-margin">
<div id="owl-demo" class="owl-carousel">
<div><img src="http://www.musicmatters.ie/images/bara2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/choir.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/bara3.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/bara2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/choir.jpg"></div>
<div><img src="http://www.musicmatters.ie/images/bara3.jpg"></div>
</div>
</div>
Related
I am styling a slick slider, all works fine excluding the hidden divs.
When I refresh the page it was loading all hidden divs and then hidden, so I set overflow:hidden; and it stopped loading hidden divs outside of the slider-holder. But still, keep loading hidden divs in the slider-holder div.
I also need css correction
I have tried variations of this code with and without not:(:nth-child(1));
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
Still loads hidden divs in slider holder when I refresh the page.
My codes:
$('#slider-holder').slick({
autoplay: true,
autoplaySpeed: 4900,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
adaptiveHeight: true,
speed: 200,
swipeToSlide: true,
cssEase: 'linear',
lazyLoad: 'progressive',
});
.featured-slider{
width:50%;
min-height:400px;
position:relative;
display:block;
float:left;
overflow:hidden!important;
}
.slider-holder {
width: 100%;
max-width: 100vw;
display: block;
position: relative;
overflow:hidden!important;
}
.slider {
background-color: lightgray;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-width: 100vw;
min-height: 400px;
display: block;
overflow:hidden!important;
}
.slider .slider-nav {
position: absolute;
height: 48px;
width: 100%;
max-width: 100%;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
}
.slider-nav .prev {
font-size: 32px;
color: #fff;
float: left;
height: 48px;
width: 48px;
line-height: 48px;
text-align: center;
position: relative;
left: 10px;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: left;
}
.slider-nav .next {
font-size: 32px;
color: #fff;
float: right;
height: 48px;
width: 48px;
line-height: 48px;
position: relative;
right: 10px;
text-align: center;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: right;
background-color: #f8f8f8;
}
.slider-nav > i {
position: relative;
vertical-align: middle;
display: inline-block;
width: 48px;
height: 48px;
}
.slider .slider:hover .slider-nav.prev,
.slider:hover .slider-nav.next {
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
opacity: 0.8;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
padding: 15px 20px 15px 20px;
pointer-events: none
}
.caption h3 {
margin-bottom: 0
}
.caption .title {
font-size: 15px;
color: #fff !important;
line-height: 21px;
font-weight: 500;
overflow-wrap: break-word
}
.caption a {
pointer-events: auto
}
.slider .caption .title {
color: #fff;
font-size: 22px;
font-weight: 500;
line-height: 28px;
margin-top: 10px;
position: relative
}
.slider .caption .title a {
color: #fff
}
.category-label {
background-color: #0a0a0a;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 400;
position: relative;
height: 1.8em;
line-height: 1.8;
padding: 0 .7em;
cursor: pointer;
z-index: 100;
pointer-events: auto;
white-space: nowrap
}
.slider .category-label,
.featured-news .news-card .category-label {
position: absolute;
top: 20px;
left: 20px
}
.slider .post-meta {
margin-bottom: 0;
position: relative;
z-index: 14
}
.slider .post-meta a {
color: #b0b0b0;
pointer-events: auto;
}
.slider .caption .category-link {
pointer-events: auto
}
.post-meta {
display: block;
width: 100%;
float: left
}
.post-meta span {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block
}
.post-meta a {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block;
font-weight: 600
}
.post-meta span i {
margin-right: 5px
}
.overlay {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.80) 100%);
bottom: 0;
content: "";
height: 50%;
opacity: .9;
position: absolute;
transition: all .3s ease-in 0s;
width: 100%;
will-change: opacity
}
.slick-slide{
outline:none!important
}
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<div class="featured-slider">
<div class="slider-holder" id="slider-holder">
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_7492ab772ab5492d96018940debac479.jpg?1628180370')">
<span class="category-label" style="background-color: #222222">Children</span>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 1</h3>
</a>
<p class="post-meta">
User
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_e285ad0d98faecc0ef4cbee582b77700.jpg?1628180400')">
<span class="category-label" style="background-color: #222222">Children</span>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 2</h3>
</a>
<p class="post-meta">
User
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
</div>
<div id="slider-nav" class="slider-nav">
<button class="prev">
<span class="notext">Back</span>
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="next">
<i class="fa-solid fa-chevron-right"></i>
<span class="notext">Next</span>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.
I'm trying to add a little feature to my website, where the user can hover over a question mark before inserting input where the question mark will display more info about what the question is asking. This is what i'm doing so far, but it's displaying the little Tool Tip feature on it's own separate line (which i know is because of the tags), but I want the Label and the little question mark to be next to each other.
<div>
<label htmlFor="dropdown"> Table Name: </label>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
<input
className='input'
value={this.state.selectedSchema.value}
onChange={(event) => this.setState({ selectedTableName:
event.target.value })
}>
</input>
</div>
CSS:
.help-tip{
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 320px;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
}
.help-tip label{
display:block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before{ /* The pointer of the tooltip */
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#0095d9;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
top:-40px;
left:0;
}
ToolTip HTML & CSS credit goes to: https://tutorialzine.com/2014/07/css-inline-help-tips
Check this out I used a container to use flex box on the label and the ? element also i changed the left margin of the ? element so its only 5 px away from your label. Last thing I changed was the z-index on the p element so it would be in front of the input element (this needs a position relative to work).
only showing the changed code.
html:
<div class="input-label-container">
<label htmlFor="dropdown"> Table Name: </label>
<div class="help-tip">
<p>More info about what this is asking for exactly.</p>
</div>
</div>
<input/>
css:
.input-label-container {
display: flex; <-
}
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 5px; <-
}
.help-tip p { /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
position: relative; <-
z-index: 999; <-
}
Hope this helps
<div>
<div className="full-width">
<div className="float-left">
<label htmlFor="dropdown"> Table Name: </label>
</div>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
</div>
<input
className="input"
value="Testing"
onChange={event =>
this.setState({ selectedTableName: event.target.value })
}
/>
</div>
CSS would be
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 100px;
}
.help-tip:before {
content: "?";
font-weight: bold;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p {
/* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: 0px;
color: #fff;
font-size: 10px;
line-height: 1.4;
top: -5px;
left: 140px;
position: absolute;
}
.help-tip label {
display: block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before {
/* The pointer of the tooltip */
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #0095d9;
right: 10px;
top: -12px;
}
.help-tip p:after {
/* Prevents the tooltip from being hidden */
width: 100%;
height: 40px;
content: "";
top: -40px;
left: 0;
}
.full-width {
width: 100%;
}
.float-left {
max-width: 50%;
float: left;
}
I want to add a background zooming out effect same as in this website carousel.. I cannot figure out a solution for that as new to web-designing.
this is the code for the div I want to apply that effect:
MARKUP:
<div class="banner">
<div class="content block1 animated">
<h1>Ceramic Directory</h1>
<span>World's largest Ceramic hub, all the ceramic traders reside here!</span>
Register now
<span class="handler">→</span>
</div>
</div>
CSS:
.banner{
margin-bottom: 10px;
background-image: url("../images/png.jpg");
background-repeat: no-repeat;
height: 700px;
background-size: cover;
width: 100%;
}
.banner .block1{
background-color: rgba(256,256,256,0.7);
margin-top: 10%;
height: 300px;
position: absolute;
width: 90%;
padding-top: 7%;
animation-name: fadein;
-webkit-animation-name: fadein;
}
.banner .block1 h1{
text-align: center;
font-family: LatoWebLight;
font-size: 40px;
margin-bottom: 5px;
}
.banner .block1 span{
text-align: center;
font-family: LatoWebHairline;
font-size: 25px;
margin-bottom: 30px;
display: block;
}
.banner .block1 a{
text-align: center;
border-radius: 5px;
border: 1px solid black;
font-family: LatoWebMedium;
font-size: 18px;
margin-left: 45%;
margin-top: 5%;
padding: 10px;
text-decoration: none;
color: black;
}
.banner .block1 .handler{
text-align: center;
border-radius: 5px;
border: 1px solid black;
cursor: pointer;
font-size: 18px;
margin-left: 105%;
margin-top: -5%;
padding: 10px;
color: black;
width: 20px;
transition: color 0.2s;
-webkit-transition: color 0.2s;
transition: background 0.2s;
-webkit-transition: background 0.2s;
}
.banner .block1 .handler:hover{
font-weight: 900;
background: rgba(34,34,34,0.5);
color: white;
}
how did they make that?
Thanks for the help
The website you mentioned uses a jQuery plugin to animate the header image. You can find the plugin's page here and some detailed documentation here
If you don't plan on using a plugin, you can achieve the image scalling effect by using CSS3. Same example below:
.test {
width: 300px;
height: 300px;
position: relative;
left: 30px;
top: 30px;
transition: all 1s;
}
.test:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.test:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: url("http://lorempixel.com/600/400");
background-size: cover;
}
<div class="test">
</div>
My slide show is almost finished, but for some reason i don't get it fixed to center my nav bullets. This is my script now (w/o the JS):
<style>
h3.slidetext {
position: absolute;
font-family: 'Open Sans', Arial;
font-size: 14pt;
font-weight: 300;
letter-spacing: 5px;
top: 100px;
left: 0;
width: auto;
color: #ffffff;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
#slideshow {position: relative; width: 960px; height: 300px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow div {position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px;}
#slideshow a {display: block; width: 960px; height: 300px; }
#slideshow a:hover{background-position: center bottom;}
#slideshownav {background-color: #000; padding-top: 8px; padding-bottom: 20px;}
#slideshownav a.navselected{color:#eb910c;}
span.markup {margin: 10px 10px 0 0; width: 20px; height: 20px; border: solid 3px; #000; border-radius: 50%;}
#slideshownav a {color: #d6d6d6; text-decoration: none; height: 200px;}
#slideshownav a:hover {cursor:pointer;}
</style>
<div id="slideshow">
<div><h3 class="slidetext">Some text</h3></div>
<div><h3 class="slidetext">Some text</h3></div>
</div>
<div id="slideshownav">
<a id="nav0" class="navselected"><span class="markup"></span></a>
<a id="nav1"><span class="markup"></span></a>
</div>
I tried: Margin: 0 auto; text-align: center; display: (inline-)block
It all doesn't work and I just don't see it anymore lol.
You can use text-align to center the elements inside #slideshownav:
CSS
#slideshownav {
background-color: #000;
padding-top: 8px;
padding-bottom: 20px;
text-align: center;
}
DEMO HERE
OR
You can center just the #slideshownav using transform:
CSS
#slideshownav {
position: relative;
background-color: #000;
padding-top: 8px;
padding-bottom: 20px;
text-align: center;
display: inline-block;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
DEMO HERE