When hovering over a circle in CSS with a background image to hide text, the shape becomes distorted

I am attempting to create a series of circles with background images and accompanying text displayed side by side. My goal is to have the image opacity change and the text disappear upon hovering over each circle. Additionally, I do not want underlines to appear beneath the links. However, I am encountering several issues.

Below is my CSS code:

.ccont {
display: inline-block;
margin: 10px;
}

.circle {
  position: relative;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  padding: 0 10px;
}

.circle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(http://deepchains.com/images/team.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.2;
}

.circle__text {
  padding: 1px;
  background-color: none;
}

.circle:hover:after {
  opacity: 1;
}

.ccont:hover {
  font-size: 0;
}

and here is the HTML code:

<center>
<A href="http://www.url1.html" ><div class="ccont" style="font-weight: bold"><div class="circle">This is <br>Text1</div></div></A>
<A href="http://www.url2.html"><div class="ccont" style="font-weight: bold"><div class="circle">Text2</div></div></A>
</center>

Here are the current issues:

  1. Upon page load, underline links appear below the images due to the use of a.

https://i.sstatic.net/3nasQ.png

  1. When hovering over the left image, the text disappears but the circle becomes deformed.

https://i.sstatic.net/vERZh.png

  1. When hovering over the right image, the text correctly disappears.

https://i.sstatic.net/yqM2j.png

Here are my questions:

  1. How can I remove the underline marks under the images that have links despite using text-decoration: none;?

  2. Why does the left image deform when hovered over while the right image remains unaffected?

  3. Is it possible to have different background images for the left and right circles?

UPDATE:

After applying @chriskirknielsen's solution, the alignment of the two images appears off:

https://i.sstatic.net/Qc518.png

The misalignment seems to be caused by the underlines being aligned, resulting in the images being pushed to different vertical locations. Perhaps removing the underlines could resolve this issue?

csshoverbackground-imagegeometry

Answer №1

It appears that the sizing issue you are encountering is related to the box-sizing property. By including * { box-sizing: border-box; } at the beginning of your CSS, the problem can be resolved as it considers the padding from the text when calculating the layout.

UPDATE: It seems like the problem for the original poster (OP) is actually linked to the font size, so perhaps changing the font color to transparent could be a better solution?

.center {
  text-align: center;
}

.ccont {
  display: inline-block;
  margin: 10px;
}

.cclink {
  text-decoration: none;
}

.circle {
  position: relative;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  background-size: 0 0;
  background-position: -9999px -9999px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  display: inline-flex;
  text-align: center;
  text-decoration: none;
  padding: 0 10px;
}

.circle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.2;
}

.circle__text {
  padding: 1px;
  background-color: none;
}

.circle:hover:after {
  opacity: 1;
}

.ccont:hover {
  color: transparent;
}
<div class="center">
  <a href="http://www.url1.html" class="cclink">
    <div class="ccont" style="font-weight: bold">
      <div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">This is
        <br>Text1</div>
    </div>
  </a>
  <a href="http://www.url2.html" class="cclink">
    <div class="ccont" style="font-weight: bold">
      <div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">Text2</div>
    </div>
  </a>
</div>

Note: Your HTML code may not comply with current standards. The <center> tag is deprecated, and tags should be written in lowercase letters.

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

Opacity problem when hovering on Chrome

Work in progress: Hello everyone, I'm facing an issue with a hover effect that only seems to be occurring in Chrome. When hovering over a tile, the background color changes, the image opacity decreases, and an icon appears over the image. In Chro ...

htmlcsshoveropacity

Styling images and text in CSS within a jQuery UI autocomplete widget

I am currently using an autocomplete widget that displays text along with images. The results I have right now are not meeting my requirements. I want to customize the appearance of my results so that the words 'test' and either 'Federico&a ...

javascripthtmlcssjquery-ui

The horizontal layout for the Bootstrap 3 sub menu is not displaying beneath the dropdown as expected

Check out my testing site here. I envision the navigation of my website to look like this in the near future, albeit at a lower resolution. While experimenting with the inspector tool, I noticed that changing the display property to inline-block causes t ...

csswordpresstwitter-bootstraptwitter-bootstrap-3submenu

What is the best way to eliminate the underline text decoration from a link element?

Take a look at this JS Bin. I want to change the link Project name in there. By default, it is underlined when hovered over. How can I remove that effect? I attempted using a class project-name: a:hover, a:focus .project-name { text-decoration: non ...

htmlcss

Eliminate any unnecessary gaps that may exist between the cards within the deck

Utilizing Jinja2 with Flask to render a list on an HTML page, I aim to produce card decks containing data from the list using a Jinja2 loop. This is my current HTML code: <div class="container-fluid"> <div class="row"> <div clas ...

htmlcsstwitter-bootstrapjinja2

Having trouble with hover effects not working on links due to the container? Here's a solution for you

I would like to create a layout with 3 columns for menu, story, and description. Each story should have its own unique description. Everything was working fine until I added a div to the middle column. The same issue arose with the right column but I manag ...

htmlcsshover

Setting the height of a Bootstrap radio button

My Bootstrap radio buttons are set to a width of 200px. However, when the text inside the button exceeds this width, it wraps onto two lines leading to changes in button height. How can I ensure that all other buttons displayed scale to the same height? h ...

cssradio-buttonbootstrap-5

Having trouble applying CSS styles to the root element despite using a CSS file

My reactjs entry component setup looks like this: import React from "react" import ReactDOM from 'react-dom'; import App from "./js/components/App.js" import './index.css'; ReactDOM.render(<App />, document.getElementById(' ...

cssreactjswebpack

Nested div within another div, shifting position relative to scrolling (React)

My goal is to create a unique effect where an object falls from the sky as the user scrolls down the page. The concept involves having the object div remain stationary in the center of its parent container, positioned 50 pixels from the top. However, when ...

htmlcssreactjsanimationscroll

Determine the currently active view on a mobile device

I am trying to determine whether the user is viewing the website vertically or horizontally on their mobile device or iPad in order to adjust the image scale accordingly. For example: If the user is viewing the page horizontally, I want the image style t ...

jquerycssmobile

Issue with sticky navbar in parallax design

I have been working on a website where all pages feature a header and a navbar located just below it. As the user scrolls down the page, I want the navbar to stick to the top of the screen once it reaches that position. However, on one specific page, I am ...

javascripthtmlcss

showcasing the picture in the email is consistently

I have created an email system that sends a message to users when they are active in the database, but I am experiencing an issue with the image not displaying. It is important for the image to appear automatically, just like Facebook's logo always sh ...

phphtmlcss

I am encountering an issue where my input is moving to the following line after the initial one. What could be

Trying to create a layout I like for this form has been a bit of a struggle. I thought I had something good at first, but after the first row of input, the formatting gets all messed up and I can't figure out what's going wrong. <!DOCTYPE htm ...

htmlcss

Increasing the width of a line to fill the entire space using CSS properties

Seeking alternative ideas to replace my current solution using only CSS for one of the problems. I already have a working JS solution, but I'm interested in exploring a CSS-only approach. https://i.sstatic.net/PQ7er.png A) All elements here have the ...

htmlcssfluid-layout

Issue with binding background images to DIV elements in Angular 4 CSS

Here is a template example: <div [style.background-image]="profileImage" ></div> In the TypeScript file: We declare private profileImage: any; and use DomSanitizer for security. Fetching photo from service: We set this.profileImage using b ...

cssangulartypescript

Bootstrap: Arrange multiple images horizontally within a row

I am trying to design a list item for a game that includes a background, an iconholder with an icon, a title, description, and up to three resources. I have been experimenting with Bootstrap and attempted using a container-fluid with an inner row but the i ...

htmlcssangularbootstrap-4

"Unexpected discrepancy: Bootstrap Glyphicon fails to appear on webpage, however, is visible

I am having some trouble getting the glyphicon to display properly in my side nav. The arrow head should rotate down, which is a pretty standard feature. Here is the link to the page: The glyphicon should be visible on the "Nicky's Folders" top leve ...

javascripthtmlcsstwitter-bootstrapglyphicons

In Firefox, the content within the div element does not respect the maximum width set

My lengthy code won't wrap properly inside the td and div elements. It works fine in Chrome, but Firefox isn't cooperating. Any tips on how to fix this issue? I'm also open to other suggestions for improving my code (e.g. "reduce your use of ...

htmlcss

Guide to centering Embed horizontally with Bootstrap 5

My goal is to create a centralized input with an image positioned above it. I have been following the guidelines provided in the position documentation, but the image still does not align horizontally: https://i.sstatic.net/awWxL.png Here's the code ...

htmlcssbootstrap-5

Incorrect positioning of dropdown menu when using Bootstrap 4 and translate3d() function

Having multiple bootstrap 4.4.1 dropdown menus, each within a column which is functioning correctly except for the position calculation. Example of HTML col: <div class="container"> <div class="row"> <div class="col"> <div ...

htmlcssdrop-down-menubootstrap-4