Styling with CSS: The Art of Showcasing Initials or Images of Individuals

Question

Styling with CSS: The Art of Showcasing Initials or Images of Individuals

By following this elegant HTML and CSS example, I am able to showcase my initials over my photo.

While this is wonderful, I would like the initials to be displayed only if the image does not exist; if the image is present, the person's initials should not be shown.

In essence, the image should cover the initials when it exists (to hide the initials).

.profile-dot {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  background-color: lightgray;
  border-radius: 50%;
  border: gray 2px solid;
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.profile-dot span {
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}

<i class="profile-dot" style="background-image: url(https://i.sstatic.net/u20P2.jpg)">
  <span>BM</span>
</i>

The actual initials are obtained from an Angular expression like:

  <span>{{ dataItem.personInitials }}</span>

I have a hint on using figure, but I haven't quite figured it out yet - i.e.

<figure>
<i class="profile-dot">
<img height="30" width="30" onerror="this.style.display='none'; this.className='' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}"  >
<figcaption>
<span>{{ dataItem.patientInitials }}</span>
</figcaption>
</i>
</figure>

css angular

Answer 1

Answer №1

To handle the onerror event on an image, you can dynamically add a class to the image element. This added class can then be used in conjunction with CSS adjacent sibling selectors to show or hide a corresponding span element.

In your CSS file, make sure to initially hide the span element and only display it when the image has the specific class that was added during the error event.

.user-avatar img+span {
  display: none; /* Hide by default */
}

.user-avatar img.error-state+span {
  display: block; /* Show when image has error state class */
}

<figure>
  <div class="user-avatar">
    <img height="50" width="50" onerror="this.style.display='none'; this.className='error-state'" src="{{ './assets/avatars/' + user.ID + '.jpg' }}" />
    <span>{{ user.username }}</span>
  </div>
</figure>

Answer 2

To handle the onerror event on an image, you can dynamically add a class to the image element. This added class can then be used in conjunction with CSS adjacent sibling selectors to show or hide a corresponding span element.

In your CSS file, make sure to initially hide the span element and only display it when the image has the specific class that was added during the error event.

.user-avatar img+span {
  display: none; /* Hide by default */
}

.user-avatar img.error-state+span {
  display: block; /* Show when image has error state class */
}

<figure>
  <div class="user-avatar">
    <img height="50" width="50" onerror="this.style.display='none'; this.className='error-state'" src="{{ './assets/avatars/' + user.ID + '.jpg' }}" />
    <span>{{ user.username }}</span>
  </div>
</figure>

Answer 3

Answer №2

If you happen to be working with angular, you can use a simple conditional if statement

<i class="profile-dot" style="background-image: url(https://i.sstatic.net/u20P2.jpg)">
  <span *ngIf="!dataItem.imageSrc">{{dataItem.personInitials}}</span>
</i>

To see this demo in action, click here - https://stackblitz.com/edit/angular-r3q4i6

Answer 4

If you happen to be working with angular, you can use a simple conditional if statement

<i class="profile-dot" style="background-image: url(https://i.sstatic.net/u20P2.jpg)">
  <span *ngIf="!dataItem.imageSrc">{{dataItem.personInitials}}</span>
</i>

To see this demo in action, click here - https://stackblitz.com/edit/angular-r3q4i6

Answer 5

Answer №3

Personally, my approach would look something like this.

The design includes a feature where a valid image is displayed, but if the link is broken, then the background color and text will be shown instead. Additionally, the text displays while the image is loading, which can be especially helpful for users with slower internet connections.

I hope you have an enjoyable weekend!

.profile-dot {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  background-color: lightgray;
  border-radius: 50%;
  border: gray 2px solid;
  overflow: hidden;
}

.profile-dot figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.profile-dot figcaption {  
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}

<div class="profile-dot">
  <figure style="background-image: url(https://i.sstatic.net/u20P2.jpg)"></figure>
  <figcaption>BM</figcaption>
</div>

<br/><br/>

<div class="profile-dot">
  <figure style="background-image: url(BROKEN-LINK)"></figure>
  <figcaption>BM</figcaption>
</div>

Answer 6

Personally, my approach would look something like this.

The design includes a feature where a valid image is displayed, but if the link is broken, then the background color and text will be shown instead. Additionally, the text displays while the image is loading, which can be especially helpful for users with slower internet connections.

I hope you have an enjoyable weekend!

.profile-dot {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  background-color: lightgray;
  border-radius: 50%;
  border: gray 2px solid;
  overflow: hidden;
}

.profile-dot figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.profile-dot figcaption {  
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}

<div class="profile-dot">
  <figure style="background-image: url(https://i.sstatic.net/u20P2.jpg)"></figure>
  <figcaption>BM</figcaption>
</div>

<br/><br/>

<div class="profile-dot">
  <figure style="background-image: url(BROKEN-LINK)"></figure>
  <figcaption>BM</figcaption>
</div>

Answer 7

Answer №4

To create a behind-the-image effect using CSS, you can utilize the z-index property to position the <span> element behind the background image. Further information on z-index can be found here. (It is necessary to remove the background color for this technique to function properly.)

.profile-dot {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  border: gray 2px solid;
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.profile-dot span {
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}

<i class="profile-dot" style="background-image: url(https://i.sstatic.net/u20P2.jpg);">
  <span style="z-index:-1;">BM</span>
</i>

Answer 8

To create a behind-the-image effect using CSS, you can utilize the z-index property to position the <span> element behind the background image. Further information on z-index can be found here. (It is necessary to remove the background color for this technique to function properly.)

.profile-dot {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  border: gray 2px solid;
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.profile-dot span {
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}

<i class="profile-dot" style="background-image: url(https://i.sstatic.net/u20P2.jpg);">
  <span style="z-index:-1;">BM</span>
</i>

Styling with CSS: The Art of Showcasing Initials or Images of Individuals

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to use jQuery to apply CSS only to elements with a specific attribute set?

Sending a different name for the jQuery parameter

Having trouble loading static CSS files in Django

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Steps to modify the Angular Universal entry file to app.js and relocate it to the root directory of the app

The tab content refuses to show up in its designated fixed location

Turn off the scrollbar without losing the ability to scroll

What is the best way to manage error handling in various locations within an Angular stream?

Switching button appearance when hovered over

How about a fading effect for the select box?

Navigate through the items in my subnavbar by scrolling the content

Is it possible to make an image gradually appear and disappear?

Steps for revealing all the information from a database when clicking on the 'Read More' button

ng2-toastr in conjunction with akveo/ng2-admin - Styles not being applied

Utilize Angular 4 Router to intercept every router modification

design and construct a three-dimensional shelving unit

CSS- Strategically placing and centering images above specific keywords in (any) HTML content without disrupting the flow of text

Live Server in VS Code not refreshing automatically as expected

Navigating through parent folder HTML files from child folder HTML files

Aligning Text to the Right Using CSS