How can i take a div within a div and make it angle in top right for a hover effect?

Question

How can i make this angle for a hover effect?

I want it to make it to the top right corner of its parent div.I have give a background and when hover over it want to change its background color.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.first{
background-color:red;
height: 400px;
width: 400px;
background-position: center;

}
h2{
transform: rotate(320deg);
position:relative;
background:black;
opacity:.6;
color:black;
}
</style>
</head>
<body>
   <div class="first">
    <h2>NEW</h2>
   </div>

</body>
</html>

Since no answer clarifies on why their solutions work, I just want to point out that the use of position:relative; on the parent container and position:absolute; on the child make this possible. Check out: http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute — Dreamlines, Jul 19 '16 at 06:21

Mohammad Usman · Answer 1 · 2016-07-19T06:08:01.867

1

Using :hover for mouseover effect and transition for smooth change, you can try following code:

.first{
  transition: background 0.25s ease;
  background-color:red;
  height: 400px;
  width: 400px;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.first:hover {
  background: brown;
}
h2{
  transform: rotate(315deg);
  text-align: center;
  position: absolute;
  background: black;
  line-height: 90px;
  height: 70px;
  color: white;
  opacity: .6;
  width: 180px;
  left: -65px;
  top: -30px;
}

<div class="first">
  <h2>NEW</h2>
</div>

edited Jul 19 '16 at 06:08

answered Jul 19 '16 at 05:27

Mohammad Usman

37,952
20
92
95

this answer has just code and has a upvote lol and my code has a downvote because i used the same snippet and implemented my own solution, talk about good answers – madalinivascu Jul 19 '16 at 05:45
@madalinivascu I've not downvoted your answer. – Mohammad Usman Jul 19 '16 at 05:49
i have fairly good idea who did , but you need to comment your code – madalinivascu Jul 19 '16 at 05:50

score 0 · Answer 2 · answered Jul 19 '16 at 05:29

0

I think you mean

.first h2 {
    opacity : 0
    transition : opacity 0.3s ease-in-out
}
.first:hover h2{
    opacity : .6;
}

answered Jul 19 '16 at 05:29

nayeri

175
1
7

How can i take a div within a div and make it angle in top right for a hover effect?

2 Answers2