Skip to main content

Text Visible On Hover - CSS

Text over image on hover via CSS.

Hover cursor on image below to see the action.

DEMO

BOO!

HTML 

<div class="hover-image">
  <img src="https://picsum.photos/1080/720">
  <div>BOO!</div>
</div>

CSS

.hover-image {
  position: relative;
  width: 300px;
  height: 200px;
}
.hover-image img {
  width: 100%;
}
.hover-image div {
  box-sizing: border-box;
  width: 100%;
  padding: 1em;
  position: absolute;
  bottom: 0;
  color: yellow;
  background-color: rgba(0,0,0,0.5);
  visibility: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.hover-image:hover div {
  visibility: visible;
  opacity: 1;
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Text Field in Webflow with Material Design Style

Custom Material Design text inputs, using a combination of native Webflow components and some simple HTML and CSS. You can clone the project here , thanks to Steven Hanley. Spent yesterday evening spinning up some @materialdesign text fields using a combination of the @webflow Designer and some simple HTML and CSS. Feel free to clone the project, customize to your liking, and use this component in your next design! ↳ https://t.co/Ti5fVj5V8t pic.twitter.com/KUi1uwW7X1 — steven hanley (@_stevenhanley) December 4, 2019
Post a Comment
Read more

Introduction

Hello world,  UIUX Component  is for those who newbie in HTML, CSS and JavaScript for their new career as Web Designer, Web Developer, Web Editor etc. We try our best to make sure we update the code which applicable for your daily routine in web development or maybe some for Apps content.  To utilise this site you should have basic knowledge on HTML, CSS and JavaScript. If you still not sure what we talking about, we have a few suggestion on where you should to start your knowledge. What is HTML HTML stands for Hyper Text Markup Language, the standard markup language for creating Web pages. Describes the structure of a Web page, consists of a series of elements which elements tell the browser how to display the content also elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Tutorial What is CSS CSS stands for Cascading Style Sheets, describes how HTML elements are to be displayed on screen, pape...
Post a Comment
Read more

Image Text Wrap-Around - CSS

Text wrap around the image with shape-outside for visual flair! DEMO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at ullamcorper mi imperdiet. Phasellus sit amet rutrum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at u...
Post a Comment
Read more