amal/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

hover animation,broken url

Browse source
This commit is contained in:
Natacha Quintero 2016-11-27 00:21:01 -04:30
commit b8d576f6ce
3 changed files with 214 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

194
digitalglarus/templates/digitalglarus/index.html
View file

@ -34,6 +34,100 @@
</form> -->
</div>
<style type="text/css">
.caption-style-1{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-1 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-1 li:hover .caption{
opacity: 1;
}
.caption-style-1 img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.caption-style-1 .caption{
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-transition:all 0.45s ease-in-out;
-moz-transition:all 0.45s ease-in-out;
-o-transition:all 0.45s ease-in-out;
-ms-transition:all 0.45s ease-in-out;
transition:all 0.45s ease-in-out;
}
.caption-style-1 .blur{
background-color: rgba(0,0,0,0.65);
height: 800px;
width: 800px;
z-index: 10;
position: absolute;
}
.caption-style-1 .caption-text h1{
text-transform: uppercase;
font-size: 24px;
}
.caption-style-1 .caption-text{
z-index: 0;
color: #fff;
position: relative;
width: 400px;
height: 200px;
text-align: center;
top:30px;
}
/** content **/
.content{
margin-top: 100px;
margin-left: 100px;
width: 700px;
}
.content p{
color: #ecf0f1;
font-family: "Lato";
line-height: 28px;
font-size: 15px;
padding-top: 50px;
}
p.credit{
padding-top: 20px;
font-size: 12px;
}
p a{
color: #ecf0f1;
}
</style>
</header>
<!-- form section ends-->
<!-- Services Section -->
@ -145,9 +239,10 @@
<!-- end:recommendationSlider -->
</div></section>
<!-- Portfolio Grid Section -->
<section id="portfolio" class="no-padding">
<div class="container-fluid">
<div class="container-fluid">
<!--<div class="row">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">here you can</h2>
@ -156,31 +251,96 @@
</div>
<div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.5s">
<img src="{% static 'digitalglarus/img/portfolio/excursion.png' %}" class="img-responsive inline-block" alt="">
<div class="caption portfolio-caption-white">excursions</div>
</div><div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.8s">
<img src="{% static 'digitalglarus/img/portfolio/ski.png' %}" class="img-responsive inline-block" alt="">
<div class="caption portfolio-caption-white">enjoy the great outdoors</div>
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/excursion.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div class="caption portfolio-caption-white">excursions</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.8s">
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/ski.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div class="caption portfolio-caption-white">enjoy the great outdoors</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.1s">
<img src="{% static 'digitalglarus/img/portfolio/concert.png' %}" class="img-responsive inline-block" alt="">
<div class="caption portfolio-caption-white">cultural events</div>
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/concert.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div class="caption portfolio-caption-white">cultural events</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.2s">
<img src="{% static 'digitalglarus/img/portfolio/inspire.png' %}" class="img-responsive inline-block" alt="">
<div class="caption portfolio-caption-white">be inspired</div>
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/inspire.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div class="caption portfolio-caption-white">be inspired</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.3s">
<img src="{% static 'digitalglarus/img/portfolio/workshop.png' %}" class="img-responsive inline-block" alt="">
<div class="caption portfolio-caption-white">workshops</div>
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/workshop.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div class="caption portfolio-caption-white">workshops</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.4s">
<img src="{% static 'digitalglarus/img/portfolio/recharge.png' %}" class="img-responsive inline-block" alt="">
<div class="caption portfolio-caption-white">recharge</div>
<ul class="caption-style-1">
<li>
<img src="{% static 'digitalglarus/img/portfolio/recharge.png' %}" class="img-responsive inline-block" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div class="caption portfolio-caption-white">recharge</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
</section>
<!--aside-->
<aside class="bg-dark">
<div class="container text-center">
@ -271,6 +431,10 @@
</section>
<!--
<div class="row">
<div class="box">