Jump to content

Image Overlay Title


Eyesee
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Posted (edited)
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 by Eyesee
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...