Creating CSS Effects for Text Hover and Transition

Looking for help to implement the hover effect 4 on the following site: .

I was able to create a test on JSFiddle, check it out here: https://jsfiddle.net/34aaqh70/

Struggling to make it auto-responsive, any tips would be appreciated.

If there's a video tutorial that demonstrates this effect, please do share!

Here is the code I've been working on:

*------ Basic Setup ------*/ * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: white;
  color: #fff;
  font-family: 'Raleway', 'Lato', 'Arial', sans-serif;
  font-weight: normal;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.clearfix {
  zoom: 1
}
.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.row {
  max-width: 1140px;
  margin: 0 auto;
}
/*------ Dividers ------*/

.divider {
  width: 25%;
  height: 30px;
  border-bottom: 1px solid rgba(89, 89, 89, 0.65);
  text-align: center;
  margin: auto;
  margin-bottom: 4%;
}
.divider span {
  font-size: 200%;
  background-color: white;
  padding: 0 10px;
}
/*------ DV BOX ------*/

.dv-box {
  padding-bottom: 5%;
}
/*------ Donation ------*/

.donate {
  padding-top: 5%;
  background-color: white;
}
.donate-content {
  color: grey;
  text-align: center;
}
.donate h1 {
  margin-bottom: 0%;
}
.donate-content .description {
  margin-top: 0%;
}
.donate-content p {
  padding-left: 5%;
  padding-right: 5%;
}
.donate img {
  width: 50%;
  height: auto;
  opacity: 1;
}
.donate img:hover {
  opacity: .7;
}
/*------ Volunteer ------*/

.volunteer {
  padding-top: 5%;
  background-color: white;
  padding-bottom: 5%;
}
.volunteer-content {
  color: grey;
  text-align: center;
}
.volunteer h1 {
  margin-bottom: -.5%;
}
.volunteer-content .description {
  margin-top: 0%;
}
.volunteer-content p {
  padding-left: 5%;
  padding-right: 5%;
}
.volunteer img {
  width: 60%;
  height: auto;
  opacity: .9;
}
.volunteer img:hover {
  opacity: 0.7;
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

</head>

...
</body>

</html>

htmlcss

Answer №1

Seems like the issue lies in having an image with fixed dimensions inside a div set to 100%. Give the following code a try.

https://codepen.io/examplelink

I modified the image width to 100% and adjusted the padding and margin of the overlay element to match the image. Additionally, I enclosed the entire icon in an extra div with a class "container" and set the width to 80% to maintain the original size. Feel free to toggle it off in dev tools to see the reason for its inclusion.

To ensure full responsiveness of this icon, you'll need to implement media queries to reduce the font size at specific breakpoints. If you require assistance with this, don't hesitate to ask :)

<div class="container">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="hovereffect">
      <img class="img-responsive" src="http://i.imgur.com/AnotherImage.png" alt="">
      <div class="overlay">
        <a class="info" href="#">Click Here</a>
      </div>
    </div>
  </div>
</div>

.container {
  width: 80%;
}

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect img {
  display: block;
  position: relative;
  width: 100%;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  border: solid #00ffffff;
  border-radius: 50%;
  box-shadow: 0 0 5px #fff;
  ;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(48, 152, 157, 0.4);
}

.hovereffect a.info {
  font-size: 400%;
  width: 80%;
  height: 80%;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 10%;
  padding: 30% 10%;
}

.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

Answer №2

To enhance your website, you must update both your html and css files. Make modifications to the .hovereffect, .hovereffect a.info classes, and include the .hovereffect a.info span class as outlined in the snippet below:

I trust this information will prove beneficial to you :)

.hovereffect {
  /*width: 100%;*/
  /*height: 100%;*/
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  border: solid #00ffff;
  border-radius: 50%;
  box-shadow: 0 0 5px #fff;;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(48, 152, 157, 0.4);
}

.hovereffect a.info {
  font-size: 3em;
  display: inline-block;
  text-decoration: none;
  padding: 25px 25px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;

  margin: 5% auto;
  /*padding: 150px 80px;*/
  height:90%;
  width: 90%;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.hovereffect a.info span {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 55px;
    width: 100%;
    left: 0;
    right: 0;
}

.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="hovereffect">
    <img class="img-responsive" src="http://i.imgur.com/TqiQO5M.png" alt="">
    <div class="overlay">
      <a class="info" href="#">
        <span>Donate</span>
      </a>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

javascriptandroidhtmlmobileviber

Creating a function within document.ready using jQuery is a common practice for ensuring that

I am currently working on creating a straightforward function that will replace an attribute when called using onclick="changeYoutube('XXXXXX');" within a link tag. However, I am encountering an issue where it says calling "changeYoutube" is resu ...

jqueryhtml

Question about Selecting Boxes

I'm looking for the name of the HTML tool that is used to create a list of objects from a select field. It typically consists of two boxes with an arrow in between them. For example, when creating a group, Box A would contain a list of users and you c ...

html

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

javascripthtmlcanvasadobe-animate

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

Tips for implementing a checkbox (with tick/untick functionality) as a replacement for a plus/minus toggle using HTML

Is it possible to use checkboxes instead of plus and minus signs for expanding and collapsing sections? Can the plus and minus symbols be incorporated into the checkbox itself, so that clicking on the checkbox toggles between plus and minus states? Any hel ...

javascripthtmlcssreactjsbootstrap-4

What could be the reason behind my code functioning properly on CodePen but not in my editor?

I'm currently using Sublime 3 for coding in HTML and CSS. After saving the files with the proper extensions, I included the Google Fonts to use the "Lobster" font. However, upon opening the .html file on Google Chrome, the Lobster font doesn't d ...

htmlcsstwitter-bootstrap-3google-font-api

What is a way to increase the boldness of an HTML anchor tag when hovering without using CSS, but by modifying the inline style?

Is it possible to make the following anchor tags appear bolder on hover using inline styles, without utilizing any external or embedded CSS file? <a href="https://en.wikipedia.org/wiki/Internet_of_Things" target="_blank">Internet of things<br& ...

htmlhover

Utilizing jQuery to target a select element's two specific children

I am trying to target the parent element by matching two specific children elements. Here is my code: $('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)"); <script src="https://c ...

javascriptjqueryhtmljquery-selectors

Guide on automatically removing a DOM element in Jquery after a set amount of time

Is there a way to delete an HTML element after a specific period of time? If a certain condition is met before the allotted time, I want to pause the timer from deleting the element. Here's a snippet of code for reference: <ul> <li dat ...

javascriptjqueryhtmlnode.jstimer

Updating Navigation Bar Font

I am a novice in the process of constructing my own navigation bar for my website, and I am encountering difficulties when trying to customize the font (color, font-family, etc). Currently, the links in my navigation bar (such as home, contact, store, etc ...

htmlcsswordpressnavigationnavbar

extracting information with beautifulsoup

Currently, I am diving into BS4 to enhance my skills and expertise. My goal is to scrape various tables, lists, and other elements from well-known websites in order to grasp the syntax. However, I am encountering difficulties when it comes to formatting a ...

pythonhtmlhtml-parsingbeautifulsoup

Adjust the remaining choices according to the dropdown selection

I am looking to dynamically adjust other dropdown menus based on the selection in a specific dropdown. For example, when the main dropdown is changed to "Change," I want the other dropdowns to automatically select the "Refused to Answer" option. HTML < ...

jqueryhtmlhtml-select

additional one hour of generated report added >

My Select option code is causing some issues. When I view the uploaded data, there seems to be a duplication and an extra tag at the end: <option value="Running Request |Running > 1 hour">Running Request |Running > 1 hour</option> The ...

html

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

javascripthtmlcssjsp

CSS trick that works on iOS16 as well

Previously, this CSS workaround was effective up to iOS version 15.6; however, it does not seem to be functioning in iOS 16. @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {} } Are there any updated techniques avail ...

cssmedia-queriesios16

Having trouble getting the custom font to display correctly in xhtml2pdf for a Django project

I'm having trouble incorporating a custom font into my PDF generated from HTML. Although I successfully displayed the font in an HTML file, indicating that the font path is correct and it's being used properly, the .ttf font type doesn't re ...

htmlcssdjangofont-facexhtml2pdf

Step-by-step guide on achieving 100% height for a child element within a parent using Flexbox

Currently facing an issue where trying to make a child element take up 100% of the remaining height of its parent container causes the child's height to go beyond the boundaries of the parent. HTML .container { height: 340px; /* background-i ...

htmlcssflexbox

Update the logo for mobile, desktop, and tablet display using Bootstrap 4alpha

I am currently working on customizing a header with Bootstrap 4 alpha. <div class="container"> <div class="row"> <div class="col-md-6 text-md-left text-center"> <div class="navbar-brand"><img src="/wp-con ...

csstwitter-bootstrapbootstrap-4

Having difficulty positioning breadcrumb items to float on the right side

As I create my Vue.js and Bootstrap application, I am working on a breadcrumb feature that presents some challenges. Specifically, I am trying to align the icons to the right while ensuring that the text "Files" remains floated to the left. <script s ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4