image hover shows div

Hover over image(s) to show text

by akmiecik

HTML

<div id="ADU_main_image"><a href="https://katiek.site/adus/ "><img class="gray-scale-img wp-image-25" src="https://katiek.site/wp-content/uploads/2022/01/chi-street-.jpg" alt="" />
<span id="text_ADU" class="text_Box"><span class="project_title">MIX-AND-MATCH ADUs</span>
<span class="project_location">ENGLEWOOD, CHICAGO, IL, USA</span>
<span class="project_date">SUMMER 2021</span>
Englewood is a neighborhood community inside the bigger city of Chicago. Unfortunately, due to the lasting effects of redlining, the neighborhood - with a population of 98% African Americans - has found itself in poverty with a high crime rate.
The idea for this project was to design an additional dwelling unit on that would essentially sit in the same footprint as the traditional Chicago garage. In my pre-design research, I looked at the iconic Chicago grid system and how that effects transportation throughout the city. Additionally, I did some deeper research on the effects of redlining in Englewood and discovered that segregation did not occur in Chicago until much later than the rest of the country. This means the effects are still prevalent today. Due to this, African Americans often find themselves trapped in low-income areas, such as Englewood. The goal of my project is to address the needs of the local community by providing a low-cost option for ADUs.
</span></a></div>
<div id="Workshop_main_image"><a href="https://katiek.site/workshop/"><img class="gray-scale-img wp-image-25 aligncenter" src="https://katiek.site/wp-content/uploads/2022/01/workshop-1.jpg" alt="" />
<span id="text_Workshop" class="text_Box"><span class="project_title">WORKSHOP</span>
<span class="project_location">BOOLEAN DIFFERENCE</span>
<span class="project_date">FALL 2019</span>This workshop focused on Rhino's command: Boolean Difference. We, as students, were told specifically to not think of this shape as a building. We started with a 12"x12" cube and then placed shapes within the cube. Next, we used the...

CSS

/* this if for pointy finger */
#ADU_main_image a:hover,
#Workshop_main_image a:hover, 
#FighterSquad_main_image a:hover,
#Ashley_main_image a:hover,{
    cursor: pointer;
}

/* hides text when not on image */
#ADU_main_image a #text_ADU,
#Workshop_main_image a #text_Workshop,
#FighterSquad_main_image a #text_FighterSquad,
#Ashley_main_image a #text_Ashley
{ display: none; }

/* this defines common text css, everything is same for all four */
/* except left position */
#ADU_main_image a:hover #text_ADU,
#Workshop_main_image a:hover #text_Workshop,
#FighterSquad_main_image a:hover #text_FighterSquad,
#Ashley_main_image a:hover #text_Ashley
 {
    display: block;
    width: 40vw;
    height: auto;
    background-color: rgba(255,255,255,.9);
    border-radius: 10px;
    box-shadow: 1px 1px 5px #000000;
    position: absolute;
    top: 1vh;
    z-index: 9999;
    padding: 10px;
    font-family: 'Roboto';
    font-variant: small-caps;
    letter-spacing: 1px;
    color: #000000;
}

/* left position for text 1 and 3 */
#ADU_main_image a:hover #text_ADU,
#FighterSquad_main_image a:hover #text_FighterSquad
{
  left: 20vw;
}

/* left position for text 2 and 4 */
#Workshop_main_image a:hover #text_Workshop,
#Ashley_main_image a:hover #text_Ashley {
  left: 30vw;
}