CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3hover
Tom Withers
Tom Withers

Reputation: 1181

CSS3 Hover reveal div

I'm Trying to Achieve this when a div element is hovered over by the user:

enter image description here

When i hover over the element nothing happens could someone please help me fix this?

here is my markup and SASS:

.birmingham-venue
	background-image: url(/assets/img/birmingham.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

.leeds-venue
	background-image: url(/assets/img/leeds.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

.glasgow-venue
	background-image: url(/assets/img/glasgow.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

.manchester-venue
	background-image: url(/assets/img/manchester.png)
	background-repeat: no-repeat
	background-size: cover
	padding-bottom: 200px
	padding-left: 0
	padding-right: 0
	margin: 0

	h2 
		margin: 0
		color: #fff
		position: absolute
		bottom: 0
		right: 0
		padding-right: 20px
		padding-bottom: 10px

	.hover-content 
		background: rgba(0,0,0,0.5)
		color: white
		cursor: pointer
		display: table
		height: 150px
		left: 0
		position: absolute
		top: 0
		width: 150px
		opacity: 0

	.hover-content div 
		display: table-cell
		text-align: center
		vertical-align: middle
	&:hover span.text-content
		opacity: 1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="centers">
    	<div class="row">
    		<div class="col-md-3 no-padding">
    			<div class="birmingham-venue">
    				<h2>Birmingham</h2>
    			</div>
    		</div>
    		<div class="col-md-3 no-padding effect4">
    			<div class="manchester-venue">
    				<h2>Manchester</h2>
					<div class="hover-content">
						<h2>Manchester</h2>
						<p>You gotta roll with it</p>
					</div>
       			</div>
    		</div>
    		<div class="col-md-3 no-padding">
    			<div class="leeds-venue">
    				<h2>Leeds</h2>
    			</div>
    		</div>
			<div class="col-md-3 no-padding">
    			<div class="glasgow-venue">
    				<h2>Glasgow</h2>
    			</div>
    		</div>
    	</div>
    </section>

any help is much appreciated

Thanks Tom

Upvotes: 0

Views: 85

Answers (2)

Tanmay
Tanmay

Reputation: 590

for class manchester-venue on hover write css manchester-venue:hover{} inside this and similar for rest of classes

Upvotes: 0

vistajess
vistajess

Reputation: 687

Hope this helps you. https://jsfiddle.net/8Ldwm10p/

//css FILE
.box {
  height: 300px;
  width: 300px;
  background: red;
}

.hidden {
  height: 100px;
  width: 100px;
  background: white;
  display:none;
}

.box:hover .hidden {
    display: block;
}

//HTML

<html>


<body>
  <div class="box">
    <div class="hidden">
      Hello there
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions