After searching for a satisfactory solution to my query in vain, I am resorting to posting it here.
I want the ability to click on any image on my website and have it displayed at full size within a static viewport with an opaque background.
This is what my current code looks like:
= link_to hide_image_path, :remote => :true, :title => "Close" do
.full_screen_image
.opaque
%img.image-middle{:src => UrlSafeBase64.decode64(image), :alt => ""}
Accompanied by the following CSS:
/* This segment creates a static semi-transparent grey layer, functioning as intended */
.full_screen_image {
position: fixed;
background-color: #6c6c6c;
opacity: 0.8;
z-index: 2000;
top: 5%;
left: 5%;
bottom: 5%;
right: 5%;
}
/* The intention here is to add a 100% opaque layer on top of the previous one
.opaque {
position: relative;
z-index: 2005;
opacity: 1;
}
/* Finally, we define the styling for the image itself
.image-middle {
position: static;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
However, the current setup presents some issues: - The image is correctly displayed as 100% opaque, but not centered on the screen as intended by the .image-middle rule - The first layer remains static while scrolling (as expected), but the image scrolls along (not the desired behavior)
My objective is to achieve the desired outcomes using only CSS/HTML, without involving Jquery or JavaScript.