I'm having an issue with my link hover effect - it seems to be causing my link to disappear, despite the fact that the hover effect

Greetings and many thanks in advance for lending your assistance and patience. I am fairly new to the world of CSS and have yet to navigate the realm of transitions.

Present before you is a modest div encompassing a background image with a text-block overlay. Prior to the implementation of the CSS hover effect, the codepin stands as follows: http://codepen.io/miskellaneousness/pen/vGQoWa

<div class="col bodybox sportsb" style="background-image: url(http://i.imgur.com/Lq76c1G.jpg);">
        <h3><a href="generic-article.html" class="hvr-sci">
            <span class="singleline">
                Shall It Be the Kayak or the Surfboard?
            </span></a>
        </h3>
</div>

Attached for your perusal is the relevant CSS:

.bodybox {
width: 23.8%;
background-color: #D5DBDB;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 240px;
padding-left: 4px;
color: pink;
background-size: cover;
background-position: -18px; 
}
h3 span { 
position: relative; 
top: 100px; 
left: 10px; 
width: 100%; 
color: white; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px;  
background: rgb(0, 0, 0); 
background: rgba(0, 0, 0, 0.7);
padding: 10px; 
}

Upon introducing the button transform CSS, the text mysteriously vanishes. Although hovering over the text-less area triggers the button effect, the absence of text poses a notable issue. Access the Codepen inclusive of the CSS addition via the following link: http://codepen.io/miskellaneousness/pen/RaqXGy

Behold the CSS enhancements made:

.hvr-sci {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
    }
.hvr-sci:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #f1c40f;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sci:hover:before, .hvr-sci:focus:before, .hvr-sci:active:before {
right: 0;
 }

Answer №1

Upon integrating your CSS into the codepen and eliminating the overflow:hidden on the .hvr-sci element, a unique line effect was produced. It is uncertain whether this aligns with the intended effect you were aiming for?

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

"Enhance your design with a cutting-edge gradient button using CSS

While exploring gradient effects in CSS, I stumbled upon this unique button design. After extensive searching on the internet, I couldn't find a solution on how to recreate the same button effect using CSS. Is it possible to create it using CSS?Button ...

Manipulating SVG on a UIWebview dynamically

Seeking guidance on manipulating SVG files loaded into a UIWebview. Currently, I load an SVG file into an HTML file and then into a UIWebview. Presumably, Javascript is required for this, but unsure about the exact process. Ideally, I aim to dynamically ma ...

The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

For some reason, I'm having trouble getting the footer to properly align at the bottom of the page. My body only seems to go halfway up the page. I tried wrapping everything in a main tag and setting a height on that, but it always ends up stopping at ...

Is there a way to eliminate unknown white gaps in the content?

I have encountered a very perplexing issue. When accessing this site on Safari, an additional 4-500px of scrollable whitespace is added. This is clearly not the intended behavior, but I am struggling to understand what is causing this space :S Upon inspe ...

Angular 4 - Issue with Top Navigation Bar not remaining fixed at the top of the page

I'm having trouble finding a solution to keep the top navigation bar fixed at the top of the screen without allowing it to scroll when the page becomes too long. I want to prevent the top nav bar from scrolling and maintain its position at the top of ...

JavaScript library for creating animated car movements on a map using JPG images

Looking for a way to animate a car's movement on a map? I have a map image in jpg format (not svg) and a sequence of (x,y) points ready to go! If you could recommend a JavaScript library that can help me easily create an HTML page with this animation ...

Creating a personalized v-for loop with v-if to apply a specific class to a div element

How can I correctly utilize v-if when using v-for inside? I am aiming to implement a condition where if the index is 0 or it's the first data, then add an active class. <div class="item active" v-for="(item, key, index) in slideItem" :key="item._ ...

Is it possible to change the name using TextBoxFor in MVC2?

Can someone help me understand why the name attribute for my textbox is not changing even though I manually defined it like this: <%: Html.TextBoxFor(model => model.Name, new { @id = "txt1", @name = "txt1" })%> The id is updated to "txt1" but th ...

As you scroll, the top block in each of the three columns will remain fixed within its

I need assistance with a problem involving three columns and multiple blocks within each column. Specifically, I want the first block in each column to remain fixed at the top when scrolling. However, once you reach the bottom of each column, the first blo ...

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

Achieving Dynamic Alignment in CSS: How to Responsively Align a Div to the Width of its Parent Using Padding and Margins

My dilemma could not be clearer - I am struggling to properly align 4 divs within a width of 1150px (the maximum width of the content div). When resizing the screen, I want them to adjust accordingly: 4 in a row when possible, then 3 in the center, and so ...

Scripting events in JavaScript/jQuery are failing to trigger on elements located inside nested <div> containers

I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row. However, I have encounte ...

The controller is referencing $rootScope which has not been properly defined

Here is my understanding of the controller concept. Whenever I launch the application, an error message appears saying "$rootScope is not defined." Can someone provide assistance in identifying the issue? var webadmin = angular.module('PcPortal' ...

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

The attempt to unserializing the configuration schema in Yii2 was unsuccessful

My brain feels scrambled... I am attempting to insert an image in HTML within Yii2. I retrieve it from the database and place it into the view file, but when I try to display it using HTML tags, an error is thrown. However, the image is being added perf ...

I seem to be having trouble getting the home page to display properly in the app, even though I believe my code is correct. I would greatly appreciate any help in identifying the mistake

I have been struggling to render the HomePage using react Router for the past two days. I would greatly appreciate any support you can provide. Despite my numerous attempts, I have been unable to solve this problem. I even tried tools like chatgpt but al ...

Find all objects in an array that have a date property greater than today's date and return them

I have an array of objects with a property called createdDate stored as a string. I need to filter out all objects where the createdDate is greater than or equal to today's date. How can this be achieved in typescript/javascript? notMyScrims: Sc ...

Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup: <table> <thead> <tr><th>1</th><th>2</th><th>3</th></tr> </thead> <tbody> <tr>< ...

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

Engaging with JSON data inputs

Need help! I'm attempting to fetch JSON data using AJAX and load it into a select control. However, the process seems to get stuck at "Downloading the recipes....". Any insights on what might be causing this issue? (Tried a few fixes but nothing has w ...