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

Answer 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"; 
  }
}