Guide on inserting an image within text with CSS3

I am attempting to modify text appearance by using a mask on mouse hover. Despite my best efforts, I cannot seem to make the image-mask method work as intended. My aim is to embed images within text.

HTML:

<div id="ALEX">ALEX</div>

​CSS:

#alex {
    font-family: 'Arial';
    font-size: 72px;
    color: rgba(0,0,0,1);
    float: right;
    line-height:90px;
    font-weight:bold;

}
#alex:hover {
-webkit-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
-o-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
-moz-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
}​

http://jsfiddle.net/tKE6N/3/

htmlcss

Answer №1

If you're looking to have the image inside of text letters, CSS3 background-clip is what you need to use, not mask-image.

Check out this webkit tutorial for guidance.

You can experiment with it on Chrome or Safari using this jsFiddle.

When it comes to background-clip values, Firefox does not support text but supports border-box, padding-box, and content-box. This means that the demo may not work in Firefox v13.0.1, but it is expected to be supported in v14.

An alternative is to use the SVG method demonstrated HERE.

Answer №2

The reason why it's not working is because you have the div declared with 

<div id="BEN">BEN</div>
and your CSS class is "ben". Make sure to either change the class to BEN or update the div to have id="ben"

One of the first things to do is to double-check that you have the correct classes in both your HTML and CSS files. Remember, CSS classes are case-sensitive, so "BEN" is not the same as "ben."

For more information, click here.

To learn more about CSS Mask-Image & Text, check out this resource.

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

Troubleshooting: Node.js not receiving data from HTML form

I am currently facing an issue with my HTML form and Node.js server. Despite implementing a form that is supposed to send data to the server, no information is being transferred. The form successfully makes a request, but it fails to send any form data alo ...

javascripthtmlnode.jsexpress

Having difficulties showcasing a variety of images stored in the database

I'm having some trouble with my e-commerce site. I can't seem to display different product images from the database on my homepage. The code I have only shows one image for all products, even though they should each have their own unique image up ...

phphtmlmysqlsql

What is the method to include a data attribute without a value in a React createElement?

When adding a div to the DOM using React, it can be done as follows: React.createElement("div", { className: "test", "data-test": true }); The resulting HTML should look like this: <div class="test" data-test> </div> I am wondering where ex ...

htmlreactjscustom-data-attribute

The CSS property :last-of-type seems to be malfunctioning

As I work on creating an HTML form and incorporating CSS into it, here is a snippet of my HTML structure: <html> <body> <div class="pt-form row"> <!-- This will be the top layer for input box --> <div class="pt-form-input ...

htmlcss

Navigate horizontally through columns by scrolling when clicking on Prev/Next buttons in Bootstrap 5

I have implemented 2 buttons that scroll the DIV left and right, but it scrolls a fixed width instead of scrolling each column in Bootstrap 5 on clicking Prev/Next. Can someone assist me with this? Thank you. DEMO JSFiddle: https://jsfiddle.net/hsmx2f5z/ ...

javascriptjquerycssbootstrap-4bootstrap-5

Unusual CSS inconsistencies between running on VS Web Server and IIS

My current dilemma involves a discrepancy in the appearance of my site when viewed locally through the visual studio web server (http://localhost:3452/) compared to when accessed on IIS7 (http://server/myproject/). Initially, I suspected a CSS issue causi ...

htmlcssvisual-studiobehavior

Ways to determine if an object has a provided attribute?

As I work on creating a small website using django, I encountered an issue: In my site, I want to view posts in detail, but not every post includes an image attribute - leading to errors when trying to display images that do not exist. The solution lies ...

htmldjangodatabase

js include exclude switch a category

Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...

javascriptjqueryhtmlcss

Determine selected option in Radio Button

FORM : <form id="approvalPenambahanUserInt" name="approvalPenambahanUserInt" action="" method="post"> <div class="form-group"> <div class="col-sm-12"> <label for= ...

javascripthtmljquery

Arrange the given data either by ID or Name and present it

Here is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .content{ border: 1px solid gray; width: 250px; ...

javascriptjqueryhtml

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

What is the best way to customize my menu so that the currently selected element stands out with a distinct color?

I'm struggling with customizing the background color of the active page due to complex HTML structure. I'm using responsive twitter bootstrap (2) and facing challenges. To view all tabs at the top, you need to stretch the viewing window. Below is ...

jqueryhtmlcsstwitter-bootstrapmenu

What is the method to display a caret in regular HTML text with the use of JavaScript?

Currently, I am studying JavaScript and aiming to develop a typing game similar to typeracer.com. The goal of the game is to type accurately and quickly without errors. In this game, users input text into a box, and JavaScript then compares their inputs w ...

javascripthtml

Showing dynamic html based on conditions using Knockout

I am working with a knockout observable array that contains both audits and comments. After receiving the data from the server, I have sorted the array based on the timestamp of the objects. My goal is to display html conditionally based on the type of ac ...

javascripthtmlknockout.jscoffeescript

Past methods: Obsolescence alert and caution

Trying to grasp the concepts of PHP & MYSQL, I have written this code which seems to be functioning properly. However, there are several "warnings" that I am unsure about. Nonetheless, PHP successfully connects to the database. Below are the relevant codes ...

phphtmlmysql

"Unable to Access Account: PHP Login Script Failing to Log Users In

I've encountered a login issue with my website script that I can't seem to figure out. The script is designed to log users in after they input their username and password, but for some reason, even with the correct credentials, authentication fai ...

phphtmllogin-script

Find the days in Laravel with no bookings at all

I have a list of bookings in one table, and there is another table called spots that contains event information such as date, day, event_name, price, duration, etc. My challenge is to group the bookings by days, which works fine. However, I face an issue ...

phpmysqlhtmllaravellaravel-blade

Data is not populating in the select option box after the AJAX request

Hey there! Recently, I've been diving into the world of AJAX. I created an example that should take data selected from the first dropdown box and filter it into the second dropdown box using AJAX. However, for some reason, the AJAX request doesn' ...

phphtmlajax

Using Jquery variables for calculations and they do not work with numerical values

Hey there, I'm new to this so bear with me. I have a jQuery question that's puzzling me... I'm attempting to set the line height using the following method: var line_height = $('.container').css("height"); console.log(line_height ...

jquerycssvariablesmathheight

Button for Selecting Colors

I love the color picker button on Google Keep, where a variety of colors pop up for selection. I'd like to add something similar to my website. What steps should I take to implement this feature? ...

htmlreactjs