Set images' width to 80% of screen width (multiple divs)

Question

Please see: https://codepen.io/alanvkarlik/pen/vdWyrd

I'm lost atm. My website has images that show up when you hover over the bold text links.

Right now they are showing up with original size, sometimes stretching beyond the screen.

I'd like them all to have the same width - say 80% of the screen width. Where and how do I edit that?

The main block with those links is centered with following divs:

<div id="wrapper">
<div class="table-container">
<div id="content">

and their css:

#wrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.table-container {
height:100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55%;
display:table;
text-align: center;
}

#content {
vertical-align:middle;
height:100%;
display:table-cell;
max-width:100%;
margin: 0 auto;
font-size: 3vw;
line-height: 4vw;
font-family: 'Vesper Libre', serif;
text-align: justify;
color: #fff;
}

Basically I used this set up to make sure the block of links is always in the centre of the screen (both width and height wise).

Any help will be appreciated !

Answer 1

You're already using the vw unit, so just use that for your image:

.hover_link img {
  width: 80vw;
  height: auto;
}

I also suggest you remove display: none; from .hover_img span as this will nullify your opacity transition (you can add pointer-events: none; to cancel any mouse event on the span and its contents).