Search code examples
htmlcsstwitter-bootstrapshadowbootstrap-popover

Remove bottom shadow on bootstrap 3 popover

How can I remove the bottom shadow on a bootstrap 3 popover?

enter image description here

I can't find the shadow anywhere in css, and I've removed all shadows from my css.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body {
  padding-top: 300px
}
.teamMember {
	width: 60%;
	margin: auto;
	transition: all .3s ease;
	padding: 20px;
}

.teamMember:hover {
	box-shadow: 
		4px 4px 4px rgba(0,0,0,.3),
		-4px -4px 4px rgba(0,0,0,.3);
}

.teamMember img {
	width: 50%;
}

.teamMember h4 {
	font-size: 3em;
	font-family: 'Arimo';
}

.teamMember h5 {
	text-transform: none !important;
	color: rgba(0,0,0,.7) !important;
	font-size: 2em !important;
}

.popover {
	background: rgba(0,0,0,0) url('https://i.imgur.com/mmiTupu.jpg') no-repeat center;
	background-size: cover;
	border: none;
	border-radius: 0;
	box-shadow: none !important;
	text-shadow: none !important;
}

.popover-content {
	border: none;
	border-radius: 0;
	padding: 100px;
}
</style>
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-12">
			<div class="teamMember" data-placement="top" data-content="oof<br/>test">
			<img src="https://i.imgur.com/mmiTupu.jpg">
			<h4>oof</h4>
			<h5>oof</h5>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	var template = [
	'<div class="popover">',
		'<div class="popover-content">',
		'</div>',
	'</div>'
	].join('');
	$(".teamMember").popover({
		trigger: "hover",
		html: !0,
		template: template
	});
});
</script>

This snippet should produce the same error, but it's not for some reason, and I'm honestly so confused. There's no shadow I see in css or dev tools, so I'm a bit stuck. Since the snippet doesn't show the issue, here's it live: https://piggeh.org/meraki/team

Any help would be appreciated.

Solution

  • You will not be able to remove that because its added on the background photo which is found in this url: https://piggeh.org/meraki/assets/images/team/popup.png

    See here:

    enter image description here

    If you would want to keep that background without the shadow you should download and edit the photo in the url given above without the shadow and then re-upload it.