-
글쓴이글
-
2021년 5월 26일 01:27 #9721
Taewon Go참가자상하좌우 전부 흰색 박스로 애니메이션 되어야하는데 자꾸 위쪽 왼쪽 만 흰색 박스트랜지션 되거나 아래쪽 오른쪽 만 트랜지션 되는데... 힌트라도 좀 주실수있나요.
.white-box{
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border: 0px solid white;
}.white-box:hover{
border: 30px solid white;
transition: all 1s;
}.portfolio-item1{
position: relative;
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(portfolio-1.jpg);
width: 50%;
height: 350px;
background-size: cover;
float: left;
overflow: hidden;
}관련 핵심 css 코드는 이렇습니다...
2021년 5월 30일 23:19 #9842
Taewon Go참가자<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel = "stylesheet" href="portfolio.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" integrity="sha256-PF6MatZtiJ8/c9O9HQ8uSUXr++R9KBYu4gbNG5511WE=" crossorigin="anonymous" /></head>
<body>
<div class="portfolio">
<small>Portfolio</small>
<h4>what we can DO</h4>
<div class="portfolio-container">
<div class="portfolio-item1">
<div class="white-box"></div>
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
<div class="portfolio-container">
<div class="portfolio-item1">
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
<div class="portfolio-container">
<div class="portfolio-item1">
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
<div class="portfolio-container">
<div class="portfolio-item1">
<div class="portfolio-text">
<h4>Stationary</h4>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div><div class="floatClear"></div>
</div>
</div>
</body>
</html>HTML 코드는 이렇습니다.
overflow hidden 한이유는 흰색 박스가 밖으로 삐져나가길래. 그위에 div박스portfolio-item1 여기다 hidden 을넣으면 넘어가지않아서 해결을 할수 있을거라 했지만 되지않았고
문제가 portfolio-item1 이 컨테이너 중점으로부터 white box 컨테이너가 점점커져야되는데 피봇(시작점)이 해당컨테이너 왼쪽 위에 설정이 되어있는데 이걸 어떻게 중점으로 바꿀수있을까요...
2021년 5월 31일 09:41 #9849
codingapple키 마스터div {
box-sizing: border-box
}이런걸 추가해봅시다 저게 없으면 border를 추가하면 박스사이즈가 커져서 밀려날 수 있습니다
-
글쓴이글
- 답변은 로그인 후 가능합니다.