Image Overlay Title

[Eyesee]

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_title

Having a bit of trouble putting everything inside the <style>  </style> into a separate css file. Does not want to work if I do. Works fine if included in the html file.

What am I doing wrong? Can anyone help please.

Thanks
Eyesee

.myimage {display:block; width:295px; height:auto;}
.myoverlay {position: absolute; bottom: 0; background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 14px; padding: 5px; text-align: left;}
.mycontainer {position:relative; width:295px; max-width: 295px;}
.mycontainer:hover .myoverlay {opacity: 1;}

 

[dsonesuk]

Link tag does not have correct url path to style.css.

Link tag does not have attribute rel="stylesheet"

css file is incorrectly named, you see style.css but if created in notepad and hide extensions is used in operating system filing it really is style.css.txt.

Not saved as encoded utf-8.

[Eyesee]

8 minutes ago, dsonesuk said:

Link tag does not have correct url path to style.css.

Link tag does not have attribute rel="stylesheet"

css file is incorrectly named, you see style.css but if created in notepad and hide extensions is used in operating system filing it really is style.css.txt.

Not saved as encoded utf-8.

Thanks.

URL is correct
Attribute is correct
CSS filename is correct
Saved as utf-8

Copied and pasted it into the main CSS file which works for everything else, just not the overlay. Also displays the image as full size, not the specified width of 295px.

Nothing else in CSS file that has the same ID that could be overwritten.

    <div class="w3-card-padding">
      <div class="mycontainer w3-border w3-hover-border-black w3-hover-shadow">
        <a href="Chapter00.html"> 
        <img src="../Images/SumF_01_00.jpg" alt="Avatar" class="myimage" ></a>
          <div class="myoverlay">
            <b>&nbsp; Summer Fun</b><br> 
            <b>&nbsp; At the Lake</b>
          </div>
      </div>
    </div>

w3-card-padding just adds padding to the left side.

Eyesee

Edited August 31, 2022 by Eyesee

[dsonesuk]

Just checking, You must NOT! have HTML style tags in css file?

You should be able to right click mouse and select 'view source', once the source is shown, go to css link and it should be clickable, click the link and it should bring up your css file, if not! There is a link problem.

[Eyesee]

15 hours ago, Eyesee said:

    <div class="w3-card-padding">
      <div class="mycontainer w3-border w3-hover-border-black w3-hover-shadow">
        <a href="Chapter00.html"> 
        <img src="../Images/SumF_01_00.jpg" alt="Avatar" class="myimage" ></a>
          <div class="myoverlay">
            <b>&nbsp; Summer Fun</b><br> 
            <b>&nbsp; At the Lake</b>
          </div>
      </div>
    </div>

 

 

This is from the html file not the CSS. As I said earlier everything else in the CSS file works, so it is not an incorrect link. Just the overlay is not working.

Eyesee