Achieving a Unique CSS Effect: Placing an Image on Top of a Card That Extends Beyond its Borders

As a newcomer to CSS, I’m not entirely sure what to call this effect or how to achieve it. Essentially, I am looking to create something similar to (picture 1), but all I have managed so far is (picture 2): https://i.sstatic.net/FrR16.png I’ve experimented with z-index and padding, but I feel like there must be a better solution out there.

Below is the code for producing picture 2:

<div class="row text-center">
    <div class="col-lg-4">
        <div class="card" style="width: 20rem;">
            <img class="card-img-top" src="picture.png" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Mirion Jones</h4>
                <p class="card-position">CEO Founder</p>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

I am utilizing Bootstrap 4.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're looking to customize image size in your code, here's a snippet that may be helpful. I've specified the image size as 60px by 60px and adjusted the margin and top. Feel free to modify these values according to your requirements.

.card-img-top {
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -30px;
  width: 60px !important;
  height: 60px;
}

.card {
  margin-top: 30px;
  padding-top: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">


<div class="row text-center">
  <div class="col-lg-4">
    <div class="card" style="width: 20rem;">
      <img class="card-img-top img-circle rounded-circle" src="https://dummyimage.com/100x100/000/fff" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Mirion Jones</h4>
        <p class="card-position">CEO Founder</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</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

Configuring the space beneath a multi-line text with a bottom border distance or shadow

I am looking to add a bottom border with less spacing than default for specific text, creating a look similar to this image: https://i.sstatic.net/sCQii.png Unfortunately, it seems the border property cannot achieve this effect. I am experimenting with t ...

htmlcss

Enter information to accompany your images in the description box

After browsing through numerous websites tonight, I stumbled upon this code. My goal is to create a photo upload page on Google Drive and set up a dropbox for it. I'm facing an issue where the information inputted into my placeholder box (city and ye ...

javascripthtmlgoogle-apps-script

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

javascriptjqueryhtmljquery-plugins

Supervising the organization of HTML sections for an offline web application

Currently, I am developing an offline HTML5 application that involves a significant amount of DOM manipulation through the creation of HTML strings within JavaScript functions. For example: var html=''; html+='<div class="main">&apos ...

javascriptjqueryhtml

Hiding Bootstrap Popover When User Clicks Outside of it

My webpage has dynamically loaded content featuring popovers which need to be bound to the body for correct loading and appearance. I am looking for a solution to hide the popovers when a user clicks outside them or on another popover trigger. After some ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

The correct functionality of canvas coordinates may become unreliable once CSS has been implemented

After successfully setting up my drag and drop game in canvas, I decided to make my canvas responsive by adding the following code to my css file: #canvas { width:100% } However, this adjustment caused a discrepancy in my coordinates. Now, when I cli ...

csshtmlcanvasresponsive-design

Displaying a Bootstrap loading spinner on the right side of a list item

I want to position a Bootstrap loading spinner on the right side of a ui li, with the text "Keywords" on the left side of the ui li. My current HTML code is as follows: <ul class="list-group" id="my-list"> <li class="l ...

htmltwitter-bootstrapbootstrap-5

"Emulate the social sharing capabilities of CNET with interactive share

I remember a while ago, CNET had these amazing Social Share buttons that, when clicked, would reveal a "dropdown box" with the social network share dialog. Does anyone know how they achieved that? I've searched but couldn't find any information ...

javascripthtmluser-interfacesocial-networking

How can I ensure an element is consistently centered within another element using Bootstrap 3?

I'm currently facing an issue with aligning elements in my center navigation. While keeping the navigation centered is not a problem, I'm struggling with positioning another element to the right of it. This element needs to be displayed in an acc ...

csstwitter-bootstraptwitter-bootstrap-3

How can I use jQuery to target elements other than the vertical scrollbar when

Here is how I am utilizing the mouseleave jquery event $(document).ready(function(){ $(document).mouseleave(function(event) { //perform a task }); }); Is there any method to prevent this event from triggering when a user scrolls ...

javascriptjqueryhtmlcss

Removing the 'div' tag using jQuery in CodeIgniter

I need assistance in removing the added item. $(document).ready(function() { $("#appendex0").click(function() { $(".divcls0").append('<div class="col-sm-10 col-sm-offset-1"><div class="col-sm-3 col-sm-offset-1"><div class="form ...

jqueryhtmlcodeigniter-3

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

javascripthtmlexpressresponsebody-parser

Issue with web form layout and heading malfunction

I'm experimenting with creating a form and dynamically setting the pattern and title fields using JavaScript. I am facing an issue with the current code as it is preventing me from entering anything into the form field, and displaying an error message ...

javascripthtml

Looking for assistance with fundamental HTML concepts

I'm struggling to make the navigation bar stretch to full height. As a beginner in HTML and CSS, I have limited knowledge about it. I have tried numerous solutions found on the internet but nothing seems to work. The styling and HTML code are provide ...

htmlcss

I need help with this Jquery code - trying to target an element with a specific attribute value. What am I missing here?

I am attempting to selectively add a border around the .L1Cell element where the attribute name parent is equal to Workstation. However, it appears to be applying the border to all .L1Cell elements. Here is the link to the JSFIDDLE $(document).ready(func ...

javascriptjqueryhtmlcss

I am experiencing an issue where the tooltip does not appear when I click the icon. What adjustments can be made to the code to ensure that the tooltip

I have created a feature to copy abbreviation definitions when the clipboard icon is clicked. A tooltip displaying 'Copied' should appear after clicking the icon, but for some reason, it's not visible. Here's the code: $(document).re ...

javascripthtmlcsstooltip

Click on a pricing category when the page is updated with jQuery Ajax

My code is experiencing an issue. When the prices tab is empty, I can select one with a CSS highlight. However, after refreshing the tab using jQuery and ajax, the selection style stops working. Below is my HTML code: $('#subcategories').on(& ...

phpjqueryhtml

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

Tips for accessing a child element within a specific div from a selection of divs in Angular

I recently started learning angular and I am working on a project that involves displaying a list of people. Each person's name is displayed along with a button to send a friend request. When the send request button is clicked, it should disappear and ...

htmlangularangularjs-directive

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE- After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here: The site is almost where I want it to be, but there are a few remaining challenges: 1) AJAX: I'm struggling to get the ...

javascriptjqueryhtmlcssslideshow