Tile Opacity Functionality

by mrmayfield

HTML

<div class="image" href="fred">Text</div>
<div class="image" href="john">Text</div>
<div class="image" href="jack">Here's some text</div>
<div class="image" href="jim">Text</div>

CSS

.image{
    float: left;
    width: 25%;
    display: block;
    height: 200px;
    width: 200px;
    background-color: green;
}

.selected-tile{
    opacity: 1 !important;
}

JavaScript

// push a class called activated, conditionally check for it

var hash = 'jack';


$('.image').click(function(){
    $('.image').css({'opacity':'0.6'});
    $('.image').removeClass('selected-tile');
    $(this).css({'opacity':'1'}).addClass('selected-tile');
});

$('.image').hover(function(){
    $('.image').css({'opacity':'0.6'});
    
    $(this).css({'opacity':'0.8'});
});

grabbed = $('.image').filter();

preSelectedImage = $('.image').filter(function(index) {
   return ($(this).attr('href')) == hash;
});

console.log(grabbed.text());