Transforming Text On Hover Using CSS, as well as Customizing the Style

I've been struggling with this issue for quite some time now. Despite scouring the first page of Google search results for "css change text on hover," I have not been able to find a solution.

Inside a div, I have text that is styled and positioned using its own inner div. What I want to achieve is changing the text when hovering over the containing div using CSS.

I tried implementing the content/:before/:after method as per some guides I found, but it only added to my confusion.

The current code performs its job well in creating circles in the services section:

.servicecircle { 
width: 204px; 
height: 204px;
background-image: url('/anonymous/for/reasons.png');
display: inline-block;
background-repeat: no-repeat;
margin-left: 22px;
margin-right: 22px;
/* Button transition*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

.servicecircle:hover{
background-image: url('/anonymous/for/reasons.png');
cursor: pointer;
}

I did manage to change the text with the following code, but it messed up the alignment of the divs. Unfortunately, I couldn't find a way to style the text within the content.

.servicecircle:after { 
width: 204px; 
height: 204px;
background-image: url('/anonymous/for/reasons.png');
display: inline-block;
background-repeat: no-repeat;
margin-left: 22px;
margin-right: 22px;
/* Button transition*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
/* Content is inserted */
content: 'Service 1';
}

.servicecircle:hover:after{
background-image: url('/anonymous/for/reasons.png');
cursor: pointer;
content: 'Service Description..';
}

This entire setup is contained within:

<div class="servicecircle">                                 
 </div>

Is what I'm trying to achieve possible with CSS?

P.S. If you could provide a link to a clear guide on this topic, it would be greatly appreciated. As someone still new to CSS, I may be venturing into advanced territory with this challenge. The existing guides are using unfamiliar code language for me.

htmlcss

Answer №1

To achieve this effect, simply utilize CSS.

<html>
<head>
<style type="text/css">
    div#line1 span#a {
        display:inline;
    }
    div#line1:hover span#a {
        display:none;
    }
    div#line1 span#b {
        display:none;
    }
    div#line1:hover span#b {
        display:inline;
    }
</style>

</head>
<body>
<div id="line1">
    <table border="1">
        <tr>  
            <td>
                <span id="a">this is sick</span><span id="b">this is awesome</span>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
<div id="line1">
    <table border="1">
        <tr>  
            <td><span id="a">this is sick</span><span id="b">this is awesome</span></td>
        </tr>
    </table>
</div>

Answer №2

If you want to customize the appearance of elements under your .servicecircle:hover:after selector, you can do so by using the following CSS:

.servicecircle:hover:after{
background-image: url('/anonymous/for/reasons.png');
cursor: pointer;
content: 'Service Description..';
color:red; // Custom style #1
font-family: cursive; // Custom style #2
border: 1px solid black; // Custom style #3
width:100%; // Custom style #4
height: 30px; // Custom style #5
}

This useful resource provides additional information on styling text.

To horizontally center your text, modify the code like this:

.servicecircle:after { 
width: 204px; 
height: 204px;
background-image: url('/anonymous/for/reasons.png');
display: inline-block;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-content: center;
/* Button transition*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
/* Content is inserted */
content: 'Service 1';
}

For further assistance with centering elements, refer to this helpful Centering Guide.

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

Tips for dynamically populating an HTML table with data from a JSON array using JQuery

I have generated an HTML table <table id="top_five_table"> <tr> <td> </th> <th>URL</th> <th width="90">Total Hits</th> <th width="380">Percentage of all Hits</th> </tr> <tr> ...

javascriptjqueryhtmljson

How can we detect line breaks within a selection using JavaScript?

Apologies for the lack of expertise in the content below, as it is being produced by a designer experimenting with coding :D The goal here is to determine the number of lines selected or highlighted by the cursor. When I mention "lines," I mean what is vi ...

javascripthtml

It is not permitted to incorporate the navbar.html file into any other modules

As someone new to web development, I have been facing challenges while working with Django This is the code for my project's modules. {% include 'navbar.html' %} <h1>projects template</h1> <p>Lorem Ipsum is simply dummy ...

pythonhtmldjangowebnavbar

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

phpjavascriptjqueryhtmlforms

The JS copy function is successful when operating on a single element, but it encounters issues when attempting to run on multiple elements, only copying

My code includes a copy function that copies the data from a textarea to the clipboard when a button is clicked. The functionality works perfectly for the first textarea, but for subsequent textareas, the buttons do not perform the copy action. Check out ...

javascripthtml

What is the process for incorporating JavaScript-generated coordination into an HTML form?

As a newcomer to Javascript, I am on a mission to integrate geo coordination directly into an HTML form input field. After learning from W3Schools how to generate user latitude and longitude Coordination, I am now eager to input them directly into an HTML ...

javascripthtml

What is the method to verify if a pop-up browser window has completed its loading process?

There is a link on my website that opens a new window. However, sometimes the new window takes so long to load. To prevent users from clicking on the link before the new window finishes loading, I want to disable it until then. I am aware that one way to ...

javascripthtml

What is the process for updating the CSS style of every other piece of data (such as an image) retrieved

Is it possible to utilize PHP code when retrieving data from a MySQL database in order to have every other record display with unique CSS formatting? For instance, I am incorporating images similar to this in my comment system: http://prntscr.com/3hpiep ...

phphtmlmysqlcss

Adjusting the angular routerLink based on an observable

When working with HTML in Angular, I am looking for a way to use an <a> tag that adjusts its routerlink based on whether or not a user is logged in. Is it possible to achieve this functionality within a single tag? <a *ngIf="!(accountService ...

htmlangulartypescript

Smartphone screen cluttered with overlapping paragraphs

I am encountering a paragraph overlap issue while using a bootstrap template, specifically on smartphones like iPhone 6 with Safari. Interestingly, the problem does not appear when testing on a browser by shrinking the window size to the minimum. On the ph ...

htmlcsssmartphoneparagraph

What HTML element identifies the beginning of a particular section?

It has been suggested that Google frowns upon using identical content across multiple websites. Is there a method to mark or label a section of content with its "source"? For example, an attribute might look like this: <div original-content="http://s ...

htmlseogoogle-searchsemantic-markup

A clever way to transfer data between HTML and Java classes

I have recently built a HTML form with multiple fields for adding new items to a list. Here is a snippet of the code: <form v-on:submit.prevent="addItem" class="mt-3"> <div class="container"> <div class="input-field"> <div ...

javahtml

How to pass data between components in Angular using @Input, @Output, and EventEmitter

After selecting a team from an array in one component, I am having trouble passing that selected team to another component. While I can log the selected team in the same component, I'm unable to access it in the other component. My goal is to use the ...

htmlcssangularbootstrap-4

Determining the optimal time to utilize the addClass function in jQuery and CSS

One of my HTML elements has the class "article": <article> Content </article> In my jQuery script, I want to add specific classes that have been predefined: $('article').addClass('rounded box-shadow gradient-bright'); I ...

jqueryhtmlcsspreload

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Setting aside the concerns surrounding allowing <script> content within a Web editor, I am fully aware of them. What I am interested in is permitting <style> and <script> elements within the text content. However, every time I attempt to ...

javascripthtmlcsstinymce

JavaScript code to retrieve an image from an <img> tag's source URL that only allows a single request and is tainted due to cross-origin restrictions

I have an image displayed in the HTML DOM. https://i.stack.imgur.com/oRgvF.png This particular image (the one with a green border) is contained within an img tag and has a URL as its source. I attempted to fetch this image using the fetch method, but enc ...

javascriptpythonhtmlseleniumcanvas

Show each item in the list vertically, using a single unordered list but displaying them in

Is there a way to display list items vertically in multiple columns using only a single ul? I need the output to look like: a e i b f j c g d h Any suggestions on how to achieve this would be greatly appreciated. Thank you! ...

htmlcss

Target the first element within a tree structure using CSS

Trying to target the initial blockquote in an email body with varying formats, such as: <div class="myclass"> <br><p></p> <div><div> <!--sometimes with less or more div--> <blockquote&g ...

htmlcss

What is the best way to reveal the following div while concealing the one before it?

Just starting out with Javascript, I'm currently developing a quiz solution that utilizes divs and buttons to navigate through the questions. I've written some JavaScript code for this functionality but I'm encountering an issue where it doe ...

javascripthtmlcss

The <Button> element is incompatible with popups. (HTML, CSS, JS)

I've been struggling with this issue. I used CSS color values to create a smiley face, but when I added a button it messed up the design (adding an unwanted circle around the center of the smiley). I attempted to synchronize the button tag with the po ...

javascripthtmlcss