CSS transition with javascript values

Question

I want to create a gallery site and wanted to have images that expand on hover (with transitions) and go full size when clicked on. The hover expansion works fine with CSS only and the full-size expansion works with javascript. But after the image was clicked once, the hover transition doesn't work anymore. I currently suspect that the value set in javascript just overwrites the CSS counterpart. My question would be whether that is true at all and how one an work around it.

my code:

var imgSelected = false;
var imgElement;

var fullSize = function(element) {
    imgSelected = true;
    imgElement = element;
    $(element).addClass("fullSize");
    $(element).removeClass("images div:hover");
    $(element).children("img").removeClass("img:hover");
    $("body").css({"visibility":"hidden", "overflow":"hidden"});
    $(element).css("visibility", "visible");
    $(element).siblings("div").css("visibility", "hidden");
    var imgW = $(element).children("img").width();
    var imgH = $(element).children("img").height();
    if (imgH/imgW * window.innerWidth > window.innerHeight) {
        $(".fullSize").css({"background-size":"auto 100%"});
        $(".fullSize img").css({"top":"0", "height":"100%", "width":"auto", "left":"50%", "transform":"translate(-50%, 0)"});
        //stop transition
        $(".fullSize img").css({"transition":"none", "-webkit-transition":"none", "-moz-transition":"none"});
    } else if (imgW/imgH * window.innerHeight > window.innerWidth) {
        $(".fullSize").css({"background-size":"100% auto"});
        $(".fullSize img").css({"left":"0", "width":"100%", "height":"auto", "top":"50%", "transform":"translate(0, -50%)"});
        //stop transition
        $(".fullSize img").css({"transition":"none", "-webkit-transition":"none", "-moz-transition":"none"});
    }
    $(".close").css("visibility", "visible");
}

var fullSizeReverse = function() {
    imgSelected = false;
    $(imgElement).removeClass("fullSize");
    $(imgElement).addClass("images div:hover");
    $(imgElement).children("img").addClass("img:hover");
    $("body").css({"visibility":"visible", "overflow-y":"scroll"});
    $(".close").css("visibility", "hidden");
    $(imgElement).siblings("div").css("visibility", "visible");
    $(imgElement).children("img").css({"width":"30%", "transform":"translate(0, 0)"});
    //$(imgElement).css({"background-size":"30% 100%"});
    imgElement = null;
    setTimeout(function() {}, 100);
}

$(".images div").click(function(e) {
    fullSize(this);
});

/* gallery images */

.images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.images div {
    pointer-events: none;
    display: flex;
    justify-content: center;
    background-size: 30% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.8s ease-in-out;
    -moz-transition: background-size 0.8s ease-in-out;
    transition: background-size 0.8s ease-in-out;
    margin-bottom: 40vh;
}

.images div:last-child {
    margin-bottom: 15vh;
}

img {
    pointer-events: auto;
    width: 30%;
    height: auto;
    opacity: 0;
    -webkit-transition: width 0.8s ease-in-out, opacity 2s ease-in-out;
    -moz-transition: width 0.8s ease-in-out, opacity 2s ease-in-out;
    transition: width 0.8s ease-in-out, opacity 2s ease-in-out;
}

.images div:hover {
    background-size: 40% 100%;
    cursor: pointer;
}

img:hover {
    width: 40%;
    height: auto;
    opacity: 1;
}

.fullSize {
    position: fixed;
    z-index: 1;
}

.fullSize img {
    position: fixed;
    opacity: 1;
    cursor: "default";
    z-index: 1;
}

/* close button */ 

.close {
    visibility: hidden;
    position: fixed;
    top: 2vmax;
    left: 2vmax;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    z-index: 2;
}

.close:hover {
    opacity: 1;
}

.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
    <h3>Images</h3>
    <a href="#" class="close" onclick="fullSizeReverse()"></a>
    <div id="work1">
        <img src="../img/work1color.jpg"/>
    </div>
    <div id="work2">
        <img src="../img/work2color.png"/>
    </div>
    <div id="work3">
        <img src="../img/work3color.jpg"/>
    </div>
</div>

I have also recreated a simpler version of the effect with CodePen:

https://codepen.io/monodualist/pen/NBdvNw

D. Seah · Accepted Answer · 2018-07-21 06:57:34Z

2

here

    $(imgElement).children("img").css({"width":"30%", "transform":"translate(0, 0)"});

should be

    $(imgElement).children("img").css({"width":"", "transform":""});

answered Jul 21, 2018 at 6:57

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D. Seah Over a year ago

I have provided two answers. Would it be ok to mark one as correct?

BoltClock Over a year ago

I suggest removing your other answer since it doesn't appear to work anyway.

D. Seah · Accepted Answer · 2018-07-21 06:17:36Z

1

in codepen, you have to unset the width and height like this

var boxClicked = false;

function fullSize(element) {
  if (boxClicked) {
    boxClicked = false;
    element.style.width = null;
    element.style.height = null;    
  } else {
    boxClicked = true;
    element.style.width = "250px";
    element.style.height = "250px"; 
  }
}

answered Jul 21, 2018 at 6:17

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

2 Comments

monodualist Over a year ago

the answer works perfectly in codepen, but for some reason it doesnt in my code. If I dont set the width in the reverse function to 30%, the image just takes as much space as it can, even tho I do specify the width in css. Any idea why that might be the case?

Ullas Hunka Over a year ago

Write the answer in the previous answer only saying as optional.

Collectives™ on Stack Overflow

CSS transition with javascript values

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related