How to skip part-shown images when using overflow: hidden? - css

Question

I'm trying to do a "read more" function.
I use overflow: hidden to hide contents which is bigger than the div.
The result now looks like:
I'd like to skip the image which is partly showed.
Like this:
When counter image, skip the whole image.
Then after click the "read more" button, all contents are showed.
How can I done that?
My code:
.post {
width: 800px;
height: 300px;
overflow: hidden;
background-color: #F6F8FA;
border-style: ridge;
border-width: 2px;
border-color: #F6F8FA;
padding: 15px;
margin-bottom: 30px;
margin-left: 5px;
margin-top: 30px;
}
.published-date {
float: right;
}
<div class="post">
<p class="published-date">published: Aug. 29, 2017, 12:19 p.m.</p>
<h1>
<a href="{% url 'post_detail' pk=post.pk %}">
<!--post.title-->
<u>[Django] 預設登入admin</u>
</a>
</h1>
<p>
<!--post.text-->
<p>在Django中，想要新增一個post，但卻還沒登入到admin時，或是admin中沒有你的帳號密碼時，你可能會得到瀏覽器回應這樣的錯誤： </p>
<p><img alt="" src="http://i.imgur.com/4cJUlK7.png?3" />
<br></p>
<p>手動登入admin（localhost:8000/admin）可能可以解決這個問題： </p>
<p><img alt="" src="http://i.imgur.com/Xfbghkx.png" />
<br><br></p>
<p>這時候如果能夠每次都自動登入，就會方便很多。<br /> 而Django在 <code>django.contrib.auth</code> 也提供了一些方法<br /> 以下條件預設登入的user只會有一個（就是我）
<br />
<br> 新增一個 <code>user.py</code> </p>
<div class="codehilite">
<pre><span></span><span class="k">class</span> <span class="nc">UserInfo</span><span class="p">():</span>
<span class="n">username</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">username</span><span class="p">}</span>
<span class="n">password</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">password</span><span class="p">}</span>
</pre>
</div>
<p><br> 在 <code>views.py</code> 中，import <code>authenticate</code> , <code>login</code> 。記得也要將自己的user資訊加進來：</p>
<div class="codehilite">
<pre><span></span><span class="kn">from</span> <span class="nn">django.contrib.auth</span> <span class="kn">import</span> <span class="n">authenticate</span><span class="p">,</span> <span class="n">login</span>
<span class="kn">from</span> <span class="nn">.user</span> <span class="kn">import</span> <span class="n">UserInfo</span>
<span class="k">def</span> <span class="nf">post_list</span><span class="p">(</span><span class="n">request</span><span class="p">):</span>
<span class="n">user</span> <span class="o">=</span> <span class="n">authenticate</span><span class="p">(</span><span class="n">username</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">username</span><span class="p">,</span> <span class="n">password</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">password</span><span class="p">)</span>
<span class="n">login</span><span class="p">(</span><span class="n">request</span><span class="p">,</span> <span class="n">user</span><span class="p">)</span>
<span class="p">{</span><span class="o">...</span><span class="n">your</span> <span class="n">code</span><span class="p">}</span>
</pre>
</div>
<p><br> 在程式執行到 <code>post_list()</code> 的時候就會自動登入，屢試不爽。</p>
<p><br><br> 這樣的寫法把user的帳密分開成一個檔案寫，若要提交到遠端repo，可以直接略過（.gitignore）含有user資訊的檔案，以免公開。
</p>
</p>
<a href="/post/32/"></p>
<a href="{% url 'post_detail' pk=post.pk %}">
<button type="button" class="show-more-btn">more...</button>
</a>
<!--end post.text-->
</div>
post.title and post.text are the title and text content.

Answer 1

You can do this with a jquery function.
$('.show-more-btn').click(function(){
$('.post').animate({height:'100%'}, 500);
});
Basically, once you click on the "more..." button, you add a height:100% to the .post
See the example below.
https://jsfiddle.net/st6ys7tt/9/