hover した時の cssが適応されません

画像にマウスを重ねたときに、キランと光るようなエフェクトをネットで見つけ、ぜひ実装したいと思いました。
（https://codepen.io/nxworld/pen/ZYNOBZ#demo14）

ですが、HTMLにclass名をつけても、cssの効果が適応されません。
もともと書いたcssが邪魔をしているのでしょうか?
原因がわかる方、どこを変えたら適応できるのか教えていただきたいです。
よろしくお願い致します。

HTML
1<div class="main">
2        <p class="photo-title"><p>
3
4
5            <div class="whole-photo">
6              <div class="box">
7
8               <div id="photo01" class="photoframe">
9                     <p class="photo">
10
11                         <img src="pic.jpg" class="figure">
12
13                     </p>
14                    <p class="in"></p>
15                 </div>
16
17
18                 <div class="note">
19                      <div class="letters">
20                      <p>####</p>
21                      <p>####</p>
22                     </div>
23                 </div>
24
25
26             </div>
27
28                 <div>
29                  <nav class="tab-change">
30                        <a href='#howtosee'>###</a>
31                      <a href='#this-week'>###</a>
32                       <a href='#today'>###</a>
33
34
35                    </nav>
36                </div>
37
38
39                    <div id='today' class='content'>
40                    
41
42                    </div>
43                 <div id='this-week' class='content'>
44                     
45                    </div>
46                    <div id='howtosee' class='content'>
47                        <img src="">
48                        <img src="">
49                    </div>

CSS
1.main{
2    width: 100%;
3    height: 1000px;
4    padding: 100px 0px;
5    margin: 0px;
6
7}
8
9
10img {
11  max-width: 100%;
12  height: auto;
13}
14body{
15  max-width: 100%;
16  height: auto;
17}
18
19.photo-title{
20 font-size:25px;
21 margin-left:150px;
22 border-bottom:3px solid #23c1ea;
23 width:375px;
24 max-width: 100%;
25 height: auto;
26}
27
28.whole-photo{
29  margin-left:70px;
30  margin-top: 50px;
31  position:relative;
32}
33
34
35.photoframe {
36  position: relative;
37  display: inline;
38  float: left;
39  width: 340px;
40  height: 430px;
41  overflow: hidden;
42  margin: 0 10px 20px;
43  margin-left:80px;
44  padding: 15px;
45  background: #ffffff;
46  border: 1px solid rgba(0, 0, 0, 0.3);
47  text-align: center;
48  -webkit-border-radius: 2px;
49  -moz-border-radius: 2px;
50  border-radius: 2px;
51  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
52  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
53  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
54  z-index: 1;
55}
56
57.photoframe .photo {
58  width: 340px;
59  height: 385px;
60  overflow: hidden;
61  margin: 0 0 10px;
62  padding: 0;
63  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
64  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
65  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
66}
67
68.photoframe img {
69  position: relative;
70  display: block;
71  margin: 0;
72  padding: 0;
73  z-index: -1;
74  width:339px;
75  height:359px;
76}
77
78.figure {
79	position: relative;
80}
81.figure::before {
82	position: absolute;
83	top: 0;
84	left: -75%;
85	z-index: 2;
86	display: block;
87	content: '';
88	width: 50%;
89	height: 100%;
90	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
91	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
92	-webkit-transform: skewX(-25deg);
93	transform: skewX(-25deg);
94}
95.figure:hover::before {
96	-webkit-animation: shine .75s;
97	animation: shine .75s;
98}
99@-webkit-keyframes shine {
100	100% {
101		left: 125%;
102	}
103}
104@keyframes shine {
105	100% {
106		left: 125%;
107	}
108}
109
110.note{
111    width:390px;
112    height:460px;
113    float:right;
114    margin-right:160px;
115    position: relative;
116    background-color: #ffffe7;
117    background-image:
118    linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
119    background-size: 100% 1.5em;
120    line-height:1.5em;
121    max-width: 100%;
122
123  }
124
125.in{
126  padding-bottom: 20px;
127  font-size: 28px;
128  margin-top: 5px;
129
130}
131
132
133.letters{
134  padding-top:10px;
135  padding-left:20px;
136  padding-right:20px;
137  font-size:28px;
138  line-height:130%;
139}
140
141.tab-change{
142  margin-right:45px;
143  max-width: 100%;
144  height:auto;
145}
146
147.tab-change a{
148  border-radius: 7px 7px 0 0;
149  display:inline-block;
150  line-height: 38px;
151  text-align: center;
152  background-color:white ;
153  color: black;
154  margin-left:0px;
155  margin-right:55px;
156  margin-top:100px;
157  font-size:20px;
158  float:right;
159  text-decoration: none;
160  padding: 0 32px;
161
162}
163
164.tab-change a:hover{
165  opacity:0.6;
166}
167
168.tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
169.tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
170.tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
171
172
173
174.content {
175  height: 320px;
176  display: none;
177  padding-top:0px;
178
179
180}
181
182.content:target {
183  display: block;
184}
185
186.week-title{
187 border-bottom:3px solid #23c1ea;
188 width:220px;
189 padding-top:200px;
190 margin-left:20px;
191
192
193}
194
195.day-title{
196 margin-left:50px;
197 border-bottom:3px solid #23c1ea;
198 width:290px;
199 padding-top:200px;
200
201
202}
203 table {
204   border:1px solid #000;
205   margin-left:60px;
206   margin-right:60px;
207   background-color: white;
208}
209
210.day {
211 text-align: center;
212 font-size: 22px;
213 margin-top: 40px;
214 margin-left: 40px;;
215
216       }
217
218.day img {
219width:   200px;
220       }
221
222.day tr td{
223border:1px solid black;
224
225}
226
227.week{
228  text-align: center;
229  margin-left:10px;
230  font-size: 22px;
231   margin-top: 40px;
232}
233
234.week tr td{
235  border:1px solid black;
236}
237.week img {
238  width:160px;
239
240}
241
242
243
244.box:after {
245 content: ' ';
246 clear: both;
247 display: block;
248       }
249
250