Shadowy figure in block form

result photo and required modifications

The image on the left shows the result I obtained in a browser, while the one on the right displays the desired outcome in Figma. I am struggling with creating a semicircle with a shadow under the coin and implementing a hover effect like the one shown on the right.

.currencies_block {
  position: relative;
  margin-bottom: 7rem;
  padding: 9.3rem 2rem 2.5rem;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
}

.currencies_i_w {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #C4C4C4;
  border-radius: 50%;
}

.currencies_text_w p {
  margin-bottom: 0;
}
<div class="row row-cols-1 row-cols-md-4 g-5 justify-content-center">
  <div class="col">
    <div class="currencies_block">
      <div class="currencies_i_w">
        <img src="../assets/images-coins/bitcoin-2.png" alt="Bank transfers" class="currencies_i" />
      </div>
      <div class="currencies_text_w">
        <p class="currencies_text">Bitcoin (BTC)</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="currencies_block">
      <div class="currencies_i_w">
        <img src="../assets/images-coins/ethereum.png" alt="NGN deposits" class="currencies_i" />
      </div>
      <div class="currencies_text_w">
        <p class="currencies_text">Ethereum (ETH)</p>
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

Advancements in technology have made implementing ideas much easier now. The cutout feature is achieved using mask-image: radial-gradient(), and the curly shadow effect with filter: drop-shadow().

@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
.card {
  font-size: 16px;
  position: relative;
  width: 339px; height: 301px;
  filter: drop-shadow(0 5px 8px #0004);
  pointer-events: none;
  cursor: pointer;
}

.icon {
  position: absolute;
  top: 28px; left: 50%; z-index: 1;
  width: 170px; height: 170px;
  transform: translatex(-42%) perspective(300px) rotatey(30deg);
  border-radius: 12px;
  filter: drop-shadow(-4px 0 0px #48140a) contrast(150%);
  pointer-events: auto;
  transition: 0.5s ease;
}
.card:hover .icon {
  transform: translatex(-36%) perspective(276px) rotatey(34deg) scale(1.24);
}

.band {
  position: absolute;
  bottom: 0; left: 0;
  height: 187px; width: 339px;
  border-radius: 12px;
  background-color: #fff;
  background-image: radial-gradient(circle at 50% 100%, #fff0 75%, #ffff 75%), radial-gradient(circle at 50% 0%, #ffff 75%, #fff0 75%), linear-gradient(to right bottom, #f15e29, #fff001);
  background-size: 339px 464px, 339px 464px, 100% 100%;
  background-position: left 50% bottom -370px, left 50% bottom -40px, 0 0;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient( circle at 50% 7px, #fff0 90px, #ffff 91px);
  mask-image: radial-gradient(circle at 50% 7px, #fff0 90px, #ffff 91px);
  pointer-events: auto;
  transition: 0.3s ease-out;
}
.card:hover .band {
  background-position: left 50% bottom -147px, left 50% bottom 93px, 0 0;
  transition: 0.4s ease-in;
}

.band::after {
  content: "";
  position: absolute;
  bottom: 3px; left: 3px;
  width: 333px; height: 181px;
  border-radius: 9px;
  background-color: #ffff;
}

.name {
  position: absolute;
  bottom: 17px;
  display: grid;
  place-items: center;
  height: 65px; width: 100%;
  font-size: 139%; font-family: 'Russo One', sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #f4f5f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
<div class="card">
  <img class="icon" src="https://cdn.pixabay.com/photo/2018/02/02/13/51/bitcoin-3125488_960_720.png" alt="">
  <div class="band"></div>
  <div class="name">Bitcoin (BTC)</div>
</div>

Answer №2

I have proposed a solution that requires completion

.currencies_block {
  position: relative;
  margin-bottom: 7rem;
  padding: 9.3rem 2rem 2.5rem;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
 
}
.currencies_block:before{
  content:'';
  background:#ffffff;
  position:absolute;
  width:250px;
  height:125px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  overflow: hidden;
  top:0px;
  right:50%;
  margin-right:-125px;
  box-shadow:       inset 0px 0px 2rem rgba(0, 0, 0, 0.15);
}



.currencies_i_w {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #C4C4C4;
  border-radius: 50%;
}

.currencies_text_w p {
  margin-bottom: 0;
}
<div class="row row-cols-1 row-cols-md-4 g-5 justify-content-center">
  <div class="col">
    <div class="currencies_block">
      <div class="currencies_i_w">
        <img src="../assets/images-coins/bitcoin-2.png" alt="Bank transfers" class="currencies_i" />
      </div>
      <div class="currencies_text_w">
        <p class="currencies_text">Bitcoin (BTC)</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="currencies_block">
      <div class="currencies_i_w">
        <img src="../assets/images-coins/ethereum.png" alt="NGN deposits" class="currencies_i" />
      </div>
      <div class="currencies_text_w">
        <p class="currencies_text">Ethereum (ETH)</p>
      </div>
    </div>
  </div>
</div>

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

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

phpjavascriptcssstringhighlight

Tips for preventing <v-layouts> from impacting one another

I'm currently working on a dynamic link box for a homepage website, which can be viewed at . Inside this link box, I have included a button that allows the creation of buttons that function as links. Interestingly, the layouts of both the options but ...

htmltypescriptvuetify.js

Using ASP .NET controls in conjunction with Bootstrap

Is there a way to easily apply bootstrap classes to all asp .net controls in my application at once? Here is an example of how I formatted my menu control using bootstrap. I am looking for a solution where I can apply the bootstrap theme commonly to all m ...

cssasp.nettwitter-bootstrapwebforms

Tips for Aligning a Collection of Relative Positioned Divs within a Parent Relative Positioned Div

Struggling to dynamically center a group of relative positioned divs within a parent div that is also relative positioned. The parent div has a width of 620px, while the child divs are each 200px wide. There could be 1 to 3 child divs per line, which is w ...

htmlcss

Eliminate unnecessary white space on your webpage using CSS with the 960.gs grid system

As I work on building my portfolio website from scratch, I came across a CSS framework known as "960.gs". While I have experience with similar tools, this is my first time delving into a pure CSS framework, so I'm feeling a bit out of practice. Here ...

htmlcss960.gs

What is the best way to create a sliding animation on a div that makes it disappear?

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

javascripthtmlcsscss-transitionscss-animations

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

Storing Images in MySQL Database with JavaScript and Node.js: A Step-by-Step Guide

I am using Javascript to capture an image and store it in a MySQL Database. Below is the code I have written for this: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- ...

javascripthtmlmysqlnode.js

I'm struggling to make this background show up in a div

Anyone able to help me figure this out? I can't seem to get the achtergrond_homepage.png as a background in rounded corners. Edit: It seems like the gray color is always on top. Could it be controlled in the JavaScript part? This is the CSS: @ch ...

javascriptcssbackground

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method alon ...

jquerycssjquery-uijquery-selectorshover

Random Image Generator in Javascript with Links

I am attempting to load one image at a time along with its corresponding link. My goal is to display the image in a div with an ID of 'ads'. Here is the code I have so far, but I am not proficient enough in JavaScript to achieve my desired outcom ...

javascriptjqueryhtmlimagesrc

How to design a custom <md-switch> with an icon in Angular Material

Is it possible to incorporate an icon into the md-switch component? I drew inspiration from a demonstration on www.inbox.google.com https://i.sstatic.net/qjw40.png Appreciate any advice or suggestions! ...

cssangular-material

Unusual CSS anomalies encountered on iPhone devices

Having an issue with the animation on my homepage where the logo spins into place. It works fine on desktop and in Chrome and Firefox mobile simulators, but on actual phones it rotates an additional 90 degrees. Included are screenshots from the Firefox mob ...

cssmobilesafarimobile-safari

Mobile device causing elements to resize unevenly

On my simple webpage, I have a combination of text and a table. Check out the HTML below: <body> <div id='stat'> <p class='subheading'>Stat of the Week: Average Final Standings</p> <p class='text&apo ...

androidhtmlcssresizehtml-table

Is it possible to set a click event or <A> link on an entire Ember component?

One of my Ember components has a tagName:'li' This is how the template appears: <div> title</div> <div> image </div> <div> text </div> The result is <li> blocks consisting of the elements above, displ ...

javascriptcssember.jscomponentsdom-events

Counting the number of PHP inputs in a field

Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...

javascriptphpjqueryhtmlajax

Issue within the application causing a sudden shutdown

I have been encountering an application error in my android phonegap app. The issue arises when I transition from one page to another page, resulting in the following message: "A network error occurred.(file:///android_asset/www/home/home.html?userid=91 ...

androidhtmlcordova

Navigating Websites in Google Search

Whenever I search for keywords related to my website on Google, the search results show my website's content and address. However, when I click on the link, it redirects me to a different unrelated website. Click here to view an image ...

htmlgoogle-search

retrieve the month and year data from the input date

I encountered a situation where I'm working with the following unique HTML code: <input type="date" id="myDate"/> <button type="button" class="btn btn-secondary" id="clickMe">MyButton</ ...

javascripthtml

Adjust the regular expression to accommodate uppercase letters and incorporate numerical values

I've been using this regex expression for an input pattern in HTML that covers a range of URLs and IP addresses: ^(https?://)?[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}/?$|^(https?://)?([a-z][a-z]+\.)+[a-z][a-z]+/? This regex ...

htmlregex