Reveal text within transparent overlay - javascript

I've an image, and I'm making it transparent on click, so it reveals the background, Making the illusion of an overlay.
I'd like to also show some text in the center of the background, so it appears when the background reveals, how to do it?
Expected:
Codepen:
https://codepen.io/ogonzales/pen/yLJGzYr
Code:
$('.tricky').click(function(){
$('img').addClass("tricky_image");
});
UPDATE 1:
Codepen multiple images in grid
https://codepen.io/ogonzales/pen/qBNLLoW


This should work. If you have any questions, please let me know. You can also add a border if you want to match the reference image better.
$('.imageDiv').click(function(){
$('img').addClass("tricky_image");
$(".text").css("display", "inline");
});
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="imageContainer">
<div class='imageDiv' id = 'test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
Updated answer:
The key thing here is remembering how the DOM works.
you had $('.imageDiv').click(function() {... which will only allow you to find the children of the image div, which the text class is not part of. I switched it to ('.imageContainer') which can traverse the DOM properly to find text as it is a child of imageContainer. Also $(this).find(".text").toggleClass("display-inline"); does not work because display-inline is not a class. I created a new class called addText which now hold the properties text had before where text now serves to hide the text until needed. Let me know in the comments if this works for you.
$('.imageContainer').click(function() {
$(this).find('img').toggleClass("tricky_image");
$(this).find('.text').toggleClass("addText");
});
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
grid-gap: 15px;
}
.flip-card {
border-style: hidden;
background-color: transparent;
width: 120px;
height: 120px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #222e36ef;
color: white;
transform: rotateY(180deg);
}
/* background overlay - text */
.imageContainer {
position: relative;
text-align: center;
color: black;
max-width: 200px;
max-height: 200px;
}
.tricky_image {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 0.5;
filter: alpha(opacity=20);
}
.text {
display: none;
}
.addText{
display: inline;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%);
}
#media(max-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-8">
<section id="team">
<div class="container">
<div class="grid">
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
<div class="imageContainer">
<div class='imageDiv' id='test'>
<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
</div>
<div class="text">text here</div>
</div>
</div>
</div>
</section>
</div>

Related

How Would I change the peeking effect from hover to scroll

I have implemented the peeking effect into my website.
Here it is http://jsfiddle.net/7yrWL/1/
Now this is working and peeks when ever I hover over the image, Now what I simply want is this effect work only if we scroll to this section. Means the container peeks out over scroll only but a click.
Any idea anyone?
Thank you
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }

$(window).scroll(function() {
scrollEffect();
});
function scrollEffect() {
$('.main').each(function(i) {
if ($(this).position().top <= $(window).scrollTop()) {
$(this).addClass('effect');
}
});
}
.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main.effect .peek, .main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */
.main.large { height: 600px; width: 600px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main square">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Test peek test peek<br/>Test peek</p>
<h3>MORE TESTING</h3>
</div>
</div>
</div>
</div>
<div class="main">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<h3>MORE<br/>Peek</h3>
</div>
</div>
</div>
</div>
<div class="main large">
<div>
<div class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="peek">
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
<p>Description<br/>with<br/>many<br/>lines.</p>
</div>
</div>
</div>
</div>
Add an .main.effect .peek class for main, which has the same effect as .main:hover .peek, and then add an effect class to each main div that enters the visible area in the scroll event.

jquery to flip cards onClick rather than css hover rotate

I am newbie JS and jquery so take it easy on me! lol....I'm using Bootstrap to make a layout using cards. As of now I have the cards flipping on a hover which works good but I think I would rather the cards flip back and forth on clicks. I have tried giving the cards a class of flip and using toggleclass but am not having any luck. Any advice would be greatly appreciated! Thanks!
.book-card {
position: relative;
box-shadow: 5px 15px 50px #aaa;
max-width: 420px;
overflow: hidden;
transition: all .8s;
}
.rotate {
perspective: 100rem;
}
.back {
position: absolute;
top: -100%;
background: #fefefe;
height: 100%;
width: 100%;
opacity: 0;
user-select: none;
pointer-events: none;
transform: rotateY(180deg);
transition: top .8s, opacity .4s;
}
.back-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.back-content p {
color: #111517;
}
.back-content h1 {
font-size: 30px !important;
}
.back-content h3 {
font-size: 25px !important;
}
.back-content a {
font-size: 30px;
padding-left: 3px;
}
.rotate:hover .book-card {
transform: rotateY(180deg);
}
.rotate:hover .back {
opacity: 1;
top: 0;
user-select: auto;
pointer-events: auto;
}
<div class="col-xl-3 col-lg-4 col-sm-8 rotate">
<div class="card text-center mb-3 book-card mx-auto">
<div class="card-header">
<h4 class="font-weight-light">TBD - <em>HRG</em></h4>
</div>
<div class="card-body">
<img src="/images/girl-two.png" class="img-fluid rounded">
</div>
<div class="card-footer">
Portland, ME
</div>
<div class="back">
<div class="back-content">
<h1 class="text-uppercase font-weight-light font-italic">Portland, ME</h1>
<h3 class="mb-3">4:45pm</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos veniam</p>
<img src="images/linklong.png">
</div>
</div>
</div>
</div>
Should I remove the hover rotate css?

You can do somthing like this..
`.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
position: absolute;
}`
$('.flip').click(function(){ //hover can be used
$(this).find('.card').toggleClass('flipped');
});
body{
padding-top:50px;
background: #555;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
width: 270px;
height: 178px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
background-color: #fff;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 270px;
z-index: 1;
}
.flip .card .front img{
width: 270px;
height: 100%;
}
.flip .card .img {
position: relaitve;
width: 270px;
height: 178px;
z-index: 1;
border: 2px solid #000;
}
.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
position: absolute;
}
.inner{
margin:0px !important;
width: 270px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="flip">
<div class="card">
<div class="face front">
<div class="inner">
<img src="https://images.pexels.com/photos/1023756/pexels-photo-1023756.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>
</div>
<div class="face back">
<div class="inner text-center">
<h3>Improved efficiency through automation</h3>
<button type="button" class="btn btn-default">Know More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Slider that increased center slide width. (Slider plugin suggestions)

I wanted to create slider when it slide center slide width must have incresed and the two slide next to it stay on normal slide.
I have tried one using slick slider.
Here is the code pen link that I have tried.(Click here)
But this is not smooth and the slide next to center slide not showing properly.
If anyone know some better slider for do exact kind of this please suggest me a link.
$('.slider').slick({
slidesToShow: 3,
centerMode: true,
centerPadding: "0px",
speed: 1000
});
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$(slick).next().css({
'margin-left':'auto'
});
});
html,
body {
background: #102131;
}
.slider {
width: 1140px;
margin: 20px auto;
text-align: center;
padding: 20px;
color: white;
}
.slider .slide {
padding: 0px;
}
.slider .slide .child-element {
transition: all .2s ease;
background: #0c1c79;
width: 100%;
height: 800px;
width: 300px;
}
.slider .slide .child-element .imgWrap img {
width: 100%;
max-width: 100%;
}
.slider .slide .child-element .desc {
display: none;
}
.slider .slide.slick-active:last-chid .child-element {
margin-left: auto;
}
.slider .slide.slick-center .child-element {
background: rebeccapurple;
-webkit-transform: translate(-70px, 0px);
transform: translate(-70px, 0px);
width: calc(100% + 140px);
max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
display: block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div class="slider">
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/dark900x12001.jpg" alt="">
</div>
<div class="text">Title1</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/trans900x1200.jpg" alt="">
</div>
<div class="text">Title2</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/mi900x1200.jpg" alt="">
</div>
<div class="text">Title3</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/Venom900x1200.jpg" alt="">
</div>
<div class="text">Title4</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/alpha900x1200.jpg" alt="">
</div>
<div class="text">Title5</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
</div>

Please Try this css for child Element:-
html,
body {
background: #102131;
}
.slider {
width: 1240px;
margin: 20px auto;
text-align: center;
padding: 20px;
color: white;
}
.slider .slide {
padding: 0px;
}
.slider .slide .child-element {
transition: all .5s;
background: #0c1c79;
width: 100%;
height: 800px;
width: 300px;
transform-origin: top center;
margin: 0 auto;
}
.slider .slide .child-element .imgWrap img {
width: 100%;
max-width: 100%;
}
.slider .slide .child-element .desc {
display: none;
}
.slider .slide.slick-active:last-chid .child-element {
margin-left: auto;
}
.slider .slide.slick-center .child-element {
background: rebeccapurple;
transform: scale(1.68);
max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
display: block;
}

Allow scrolling for absolute child element of fixed parent element

I have a header element which is fixed. Within in the element, there is a dropdown nav that is positioned absolute under the header. I implemented the dropdown function to make it appear, however, is there a possibility to scroll the nav while the header remains fixed? I found out the nav gets rather big, too big to not to scroll.
My current progress:
window.onload = function() {
var menuBtn = document.getElementById("menu-icon"),
navbar = document.getElementById("navbar"),
header = document.getElementById("header");
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu(){
menuBtn.classList.toggle("active");
navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
}
}
header {
background:#ddd;
position: fixed;
height: 45px;
top: 0;
width: 100vw;
z-index: 500;
}
nav{
overflow: auto;
background: #fff;
position: absolute;
left: 0;
top: 45px;
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#menu-icon {
display: block;
float: right;
height: 100%;
width: 22px;
margin-right: 7%;
background: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#menu-icon.active{
background: blue;
}
.item{
display: inline-flex;
width: 86vw;
padding: 8px 0;
margin: 0 7%;
border-top: 1px solid #58595b;
}
.item a{
color: #58595b;
display: inline-block;
width: 85%;
transition: all 0.3s;
}
<header id="header">
<div id="menu-icon"></div>
<nav id="navbar">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</nav>
</header>

Just add this CSS
#navbar{
position: relative;
overflow-y: auto;
}

You can Add in this css file
#navbar{
position: relative;
overflow-y: scroll;
height:200px;
}
window.onload = function() {
var menuBtn = document.getElementById("menu-icon"),
navbar = document.getElementById("navbar"),
header = document.getElementById("header");
menuBtn.addEventListener('click', toggleMenu);
function toggleMenu(){
menuBtn.classList.toggle("active");
navbar.style.maxHeight = navbar.style.maxHeight ? null : navbar.scrollHeight + "px";
}
}
header {
background:#ddd;
position: fixed;
height: 45px;
top: 0;
width: 100vw;
z-index: 500;
}
#navbar{
position: relative;
overflow-y: scroll;
height:200px;
}
nav{
overflow: auto;
background: #fff;
position: absolute;
left: 0;
top: 45px;
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#menu-icon {
display: block;
float: right;
height: 100%;
width: 22px;
margin-right: 7%;
background: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#menu-icon.active{
background: blue;
}
.item{
display: inline-flex;
width: 86vw;
padding: 8px 0;
margin: 0 7%;
border-top: 1px solid #58595b;
}
.item a{
color: #58595b;
display: inline-block;
width: 85%;
transition: all 0.3s;
}
<header id="header">
<div id="menu-icon"></div>
<nav id="navbar">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
<div class="item">
Item D
</div>
<div class="item">
Item E
</div>
<div class="item">
Item F
</div>
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</nav>
</header>

How to make fade in on hover?

I'm trying to make some text fade in over an image on hover over the div container. Just to give you a precise example here is what I'm looking for: http://outgrow.me/.
Here is my HTML as it stands:
<div class="project-boxes">
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
</div>
My CSS:
/**********************
*****PROJECT BOXES*****
**********************/
.project-boxes {
margin: 0 3%;
}
.box {
padding: 2.5%;
width: 20%;
height: 120px;
margin: 2% 3.9999999999999999999%;
float: left;
border: 1px solid #BABABA;
border-radius: 5px;
}
.box h3 {
color: #3F7250;
}
I don't have any javascript or jquery for this yet but would like to implement some in my project. Feel free to share this with me on a fiddle or something. Thanks.

You can use jQuery to target the hover event and fade in the description.
$('.box a').hover(function() {
$(this).find('.desc').fadeIn(500);
}, function() {
$(this).find('.desc').fadeOut(500);
});
.box {
position: relative;
}
.box .desc {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
background: rgba(255, 255, 255, 0.5);
}
<div class="box">
<a href="project1.html">
<img src="http://placehold.it/150x150" />
<div class="desc">
<h3>Project 1</h3>
<p>Description</p>
</div>
</a>
</div>
jsFiddle

Without JQuery:
<div class="box">
<a href="project1.html">
<div class='text'>
<h3>Project 1</h3>
<p>Description</p>
</div>
<img src="../img/project1.png">
</a>
</div>
CSS:
.box {
position: relative;
...
}
.box .text {
position: absolute;
z-index = 1;
}
.box img {
position: absolute;
z-index = 2;
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.box img:hover {
opacity: 0.2;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}

No need for JS. Use plain CSS and :hover
/* SIMPLY ADD THIS TO YOUR CSS */
.box img ~ *{
opacity:0;
transition:0.3s;
}
.box:hover img ~ *{
opacity:1;
}
.project-boxes {
margin: 0 3%;
}
.box {
padding: 2.5%;
width: 20%;
height: 120px;
margin: 2% 3.9999999999999999999%;
float: left;
border: 1px solid #BABABA;
border-radius: 5px;
}
.box h3 {
color: #3F7250;
}
.box img ~ *{ /* ADD THIS */
opacity:0;
transition:0.3s;
}
.box:hover img ~ *{ /* AND THIS */
opacity:1;
}
<div class="project-boxes">
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
<div class="box">
<a href="project1.html">
<img src="../img/project1.png">
<h3>Project 1</h3>
<p>Description</p>
</a>
</div>
</div>

Doing this on javascript would be more complicated that to do it with jquery or CSS.
but, still if you want javascript so badly here :
// fade out
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = 'none';
el.classList.add('is-hidden');
} else {
requestAnimationFrame(fade);
}
})();
}
// fade in
function fadeIn(el, display) {
if (el.classList.contains('is-hidden')) {
el.classList.remove('is-hidden');
}
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
var btn = document.querySelector('.js-btn');
var el = document.querySelector('.js-fade');
btn.addEventListener('click', function(e) {
if (el.classList.contains('is-hidden')) {
fadeIn(el);
} else {
fadeOut(el);
}
});
.is-hidden {
display: none;
}
.btn {
background: #ccc;
border-radius: 3px;
display: inline-block;
padding: 5px;
}
body {
padding: 40px;
}
<span class="js-btn btn">Click me</span>
<div class='js-fade is-hidden'>You look amazing!</div>

Categories